Html5 что это и как установить

Как скачать и использовать проигрыватель html5?

HTML5 Video Player является популярным приложением, предназначенным для конвертации файлов в формат HTML5. Получившиеся ролики, как правило, размещают на страницах сайтов в сети. Программа примечательна тем, что в ней можно применять любые исходные файлы. Также вы можете провести редактирование документа. После окончания предварительных работ появится окно предпросмотра, позволяющее проконтролировать результат еще до рендеринга. В данной статье мы расскажем о том, как скачать и начать пользование приложением HTML5 Video Player.

1 Основные возможности

2 Преимущества

Программа html5 video player появилась относительно недавно, но сразу была взята на вооружение многими популярными хостингами. Благодаря совместимости со всеми браузерами, приложение используют повсеместно. Фактически, ролики с интерфейсом плееров, созданные в нем, можно залить на любой сайт. Саму программу html5 video player можно установить не только на компьютер, но и на портативные гаджеты с различными операционными системами.

Скачать html5 video player можно бесплатно, ввиду чего им пользуются сотни тысяч юзеров по всему миру. Главным его преимуществом является возможность работы без установленного на компьютере или смартфоне Flash Player. Пользователю предоставляется возможность изменять интерфейс проигрывателя, адаптируя его внешний вид под дизайн сайта.
к меню ↑

3 Недостатки

Среди недостатков html5 video player стоит выделить только то, что он сделан по стандартам интернет-страниц. Посмотреть ролик такого формата на компьютере при помощи какой либо утилиты будет сложно. В остальном программа отлично справляется с задачами. Интересна она будет в первую очередь web-мастерам и владельцам сайтов.
к меню ↑

4 Как скачать плеер

5 Принцип работы

После запуска программы вы увидите понятный русскоязычный интерфейс с удобно расположенными кнопками. На навигационной панели конвертора имеются следующие кнопки:

При выборе файла для конвертации вам также нужно будет сразу указать папку, в которую производится сохранение. Для включения режима предпросмотра нажмите на кнопку «Показать HTML». Если вы все сделали правильно, нажмите на «Конвертировать». При необходимости вы можете поменять настройки программы в меню «Опции».
к меню ↑

6 Мнение эксперта

«Вы можете самостоятельно проверить, какой именно плеер поддерживает ваш браузер. Соответствующий раздел можно найти в настройках YouTube. Важно помнить, что даже при наличии html5 video player удалять Adobe Flash не стоит. Он отвечает за воспроизведение флеш-анимаций, которые после деинсталляции не будут включаться», — пишет пользователь интернета Алексей.

к меню ↑

7 Заключение

Плеер html5 пригодится веб-мастерам, которые занимаются современными проектами. Флеш-анимация постепенно уходит на второй план, ввиду чего приходится подстраиваться под новые тенденции. С управлением html5 video player сможет справиться даже неопытный пользователь, что позволит попрактиковаться и сделать первые шаги в работе с программами такого рода.

Введение в HTML5

Что такое HTML

HTML (HyperText Markup Language) представляет язык разметки гипертекста, используемый преимущественно для создания документов в сети интернет. HTML начал свой путь в начале 90-х годов как примитивный язык для создания веб-страниц, и в настоящий момент уже трудно представить себе интернет без HTML. Подавляющее большинство сайтов так или иначе используют HTML.

Что именно привнес HTML5?

HTML5 определяет новый алгоритм парсинга для создания структуры DOM

переопределение правил и семантики уже существовавших элементов HTML

Фактически с добавлением новых функций HTML5 стал не просто новой версией языка разметки для создания веб-страниц, но и фактически платформой для создания приложений, а область его использования вышла далеко за пределы веб-среды интернет: HTML5 применяется также для создания мобильных приложений под Android, iOS, Windows Mobile и даже для создания десктопных приложений для обычных компьютеров (в частности, в ОС Windows 8/8.1/10).

В итоге, как правило, HTML 5 применяется преимущественно в двух значениях:

HTML 5 как обновленный язык разметки гипертекста, некоторое развитие предыдущей версии HTML 4

HTML 5 как мощная платформа для создания веб-приложений, которая включает не только непосредственно язык разметки гипертекста, обновленный HTML, но и язык программирования JavaScript и каскадные таблицы стилей CSS 3.

Поддержка браузерами

Надо отметить, что между спецификацией HTML5 и использованием этой технологии в веб-браузерах всегда был разрыв. Большинство браузеров стало внедрять стандарты HTML5 еще до их официальной публикации. И к текущему моменту большинство последних версий браузеров поддерживают большинство функциональностей HTML5 (Google Chrome, Firefox, Opera, Internet Explorer 11, Microsoft Edge). В то же время многие старые браузеры, как например, Internet Explorer 8 и более младшие версии, не поддерживают стандарты, а IE 9, 10 поддерживает лишь частично.

При этом даже те браузеры, которые в целом поддерживают стандарты, могут не поддерживать какие-то отдельные функции. И это тоже надо учитывать в работе. Но в целом с поддержкой данной технологии довольно хорошая ситуация.

Для проверки поддержки HTML5 конкретным браузером можно использовать специальный сервис http://html5test.com.

Необходимые инструменты

Также стоит упомянуть кроссплатформенный текстовый редактор Visual Studio Code. Данный редактор обладает несколько большими возможностями, чем Notepad++, и кроме того, может работать не только в ОС Windows, но и в MacOS и в операционных системах на основе Linux.

Как скачать и использовать проигрыватель html5

Разработчик:	DVDVideoSoft Ltd.
Лицензия:	Freeware (бесплатное ПО)
Язык:	Русский есть
Система:	Windows 10/8.1/8/7/XP
Размер:	28.33 Мбайт
Обновлен:	18 мая, 2017

HTML5 Video Player – приложение, предназначенное для конвертации видео файлов в формат HTML5. Созданные видеоролики могут быть размещены на страницах веб-сайтов. В качестве исходного материала можно использовать любой видео формат.

Программа способна не только конвертировать видео, но и редактировать его (переворачивать, обрезать). Перед сохранением результата можно запустить готовое видео в режиме предпросмотра. Следует отметить, что приложение позволяет выбрать «скин» проигрывателя, который будет интегрирован в браузер.

Основные возможности

Преимущества

Приложение html5 video player появилось не так давно, но уже успело завоевать популярность, благодаря своим преимуществам. Главным достоинством программки можно считать то, что она способна работать со всеми популярными видео форматами. Это значит, что на свой сайт можно «залить» любой фильм (ролик).

Еще одним преимуществом можно считать совместимость с браузером Internet Explorer, Safari, Opera, Google Chrome, а также Firefox. При этом вы можете перед сохранением файла проверить, как он будет воспроизводиться в том или ином интернет-обозревателе.

Проигрыватель html5 является кроссплатформенным приложением. Его можно установить не только на ПК, который управляется ОС Windows, но и на мобильные устройства Android и iOS. Таким образом, публиковать видео возможно сразу с телефона.

Скачать html5 video player можно совершенно бесплатно. При этом на сайте разработчика имеется русскоязычная версия плеера. Благодаря этому пользователям будет проще разобраться с работой программки.

Благодаря html5 видео, загружаемое на веб-сайты можно просматривать без установки Flash Player. Поэтому программу можно встретить в списке самых скачиваемых плееров. В качестве дополнения, разработчики предоставляют возможность пользователям изменять внешний вид проигрывателя на сайте.

Недостатки

Что касается недостатков html5 video player, то он всего один. Конвертируемые файлы оптимизированы только под web-стандарт. Это значит, что видео html5 будет неудобно смотреть локально. В остальном недостатков у программки не обнаружено.

Следует заметить, что эта программа будет интересна только владельцам сайтов и web-мастерам. Для обычного пользователя, видеоплеер не представляет ценности.

Как скачать плеер

Чтобы скачать видеоплеер, необходимо посетить веб-сайт разработчика. Для этого требуется перейти по следующему URL-адресу: «https://www.dvdvideosoft.com/». Чтобы было удобнее пользоваться сайтом, рекомендуется сменить язык. Это можно сделать, кликнув по флажку, расположенном в правом верхнем углу. После чего необходимо выбрать русский язык.

Когда интернет-ресурс будет русифицирован, нужно кликнуть по ссылке «Скачать». Сразу после этого откроется страница со всеми доступными продуктами. Чтобы загрузить проигрыватель, следует опуститься до раздела «Другие программы».

На следующем шаге, необходимо кликнуть по названию конвертера. Открывшаяся станица демонстрирует информацию о проигрывателе. Чтобы загрузить программу, требуется опуститься в самый низ веб-страницы, а затем кликнуть по кнопке «Скачать». Теперь остается только установить программный продукт.

Принцип работы

Когда программа загрузится, вы увидите русскоязычный, интуитивно понятный интерфейс. При помощи навигационной панели вы можете:

После того как файл для конвертировании будет выбран, рекомендуется указать каталог в который сохранится готовый результат. Также необходимо задать формат конвертируемого видео.

Чтобы ознакомиться с результатом, требуется установить галку напротив пункта «Показать HTML…». Для преобразования фалов, нужно кликнуть по кнопке «Конвертировать».

Следует отметить, что имеется возможность изменить настройки самой программы, для этого нужно нажать на кнопку «Опции…».

Заключение

Веб-мастера занимающиеся сайтостроением, должны понимать принцип работы html5. Так как сайты с Flash анимацией (видео) уходят на второй план, поэтому без видеоплеера-конвертера не обойтись. С управлением проигрывателя справится даже начинающий пользователь. Важно отметить, что существуют и платные аналоги, способные конвертировать html5 видео. При необходимости можно воспользоваться ими.

Как писать на HTML5 и какие у него возможности

Разбираемся, какие возможности есть у HTML5, чем он отличается от предыдущих версий и что почитать по теме HTML для самообучения.

Что такое HTML

HTML (HyperText Markup Language) — язык разметки гипертекста. Это формат документов, который изначально содержал:

Словарь HTML состоит из множества тегов. Все они записаны в стандарт, который поддерживает международная организация World Wide Web Consortium (Консорциум W3C). Последняя рекомендация W3C для языка HTML имеет номер версии 5.2. В документе перечислены все элементы, которые можно использовать в коде веб-страницы. Это большой словарь, к которому придётся часто обращаться.

Конечно, современные браузеры отлично покажут документ независимо от того, в каком стиле оформлен код HTML, но вам будет стыдно перед коллегами, которые заглянут в исходники.

Набор технологий HTML5

HTML5 — последняя и самая мощная версия стандарта HTML, с новыми элементами, атрибутами и поведением. Под термином HTML5 также подразумевают набор технологий для разработки сайтов и веб-приложений.

Термином HTML5 обозначаются свыше десяти отдельных стандартов. А некоторые из технологий HTML5 до сих пор не утверждены окончательно. Их поддерживают не все браузеры (или каждый браузер по-разному).

Когда мы говорим об интерактивных сайтах и AJAX, то почти всегда речь идёт о технологиях HTML5.

В HTML5 есть программные интерфейсы (API) для передачи видео и звука, для чатов, в том числе видеочатов через браузер, и многих других интересных интерактивных штук. На HTML5 даже создают браузерные игры. И всем известный YouTube сейчас работает через HTML5, хотя раньше обязательно требовал Flash.

Отличия HTML5 от предыдущих версий

Формально перейти с обычного HTML (HTML4) на HTML5 очень просто: достаточно написать в начале кода веб-страницы тег для указания типа документа.

Всё, теперь у нас документ по стандарту HTML5.

Однако здесь добавлено много новых технологий:

Как редактировать HTML?

Разметка HTML5 создаётся с помощью тех же приложений, что и разметка обычного HTML, начиная с «Блокнота» в Windows и заканчивая современными средствами разработки со встроенными шаблонами для быстрого создания документов HTML5 — например, Notepad++, Sublime Text.

Справочные ресурсы по HTML

Как научиться писать на HTML

Одной зубрёжкой тегов не обойтись. Изучайте основные элементы и экспериментируйте. Поставьте сами конкретную задачу (например, сделать сайт-визитку) или возьмите платное задание как фрилансер и пробуйте его реализовать.

Можно подсматривать в справочник, гуглить, спрашивать совета на форумах и сайтах с вопросами-ответами. Или найти максимально похожий сайт, открыть его код — и разбираться, как он работает. Можно изменить его для своих нужд, только не забудьте стереть копирайты и комментарии авторов.

Копипаст чужой работы — нормальное явление в программировании, здесь это называется Open Source, очень модное и продвинутое течение.

Некоторые разработчики не хотят открывать свой код, они шифруют (обфусцируют) скрипты на сайтах, но их тоже можно разобрать специальными инструментами.

Чтобы создавать интерактивные сайты с более сложной функциональностью, с современным и красивым дизайном, нужно дополнительно изучить CSS, JavaScript, веб-дизайн и некоторые другие предметы. Тут требуется более фундаментальная подготовка.

Погрузившись в обучение, вы научитесь создавать свои собственные
веб-проекты и сможете претендовать на позицию junior-разработчика.

Что такое HTML5?

Введение в HTML5

Добро пожаловать в Envato Tuts +! Этот учебник содержит вводный обзор HTML5. Если вы ничего не слышали об этом или просто хотите понять его значимость, вы попали в нужное место.

HTML5 является последним стандартом для браузеров для отображения и взаимодействия с веб-страницами. Утвержденный в 2014 году, это первое обновление для HTML за 14 лет. Это прямо целая жизнь между обновлениями.

Целью HTML5 является, в первую очередь, упрощение для веб-разработчиков и создателей браузеров соблюдения стандартов, основанных на консенсусе, которые повышают эффективность и расширение прав. Он также предназначен для обеспечения более лучшего, более быстрого и удобного пользовательского интерфейса для десктопа и мобильных пользователей.

Вот несколько ключевых улучшений в HTML5:

Например, ниже приведен пример геолокации HTML5 из «Создание вашего стартапа с PHP: геолокация и Google Места» (Tuts +):

Для кого HTML5 имеет значение?

Вы просто веб-пользователь или поклонник YouTube?

HTML5 улучшит скорость, удобство использования и согласованность в Интернете. Да, ваш опыт YouTube будет постепенно становиться все лучше. Будет меньше обновлений для браузера и плагинов, меньше угроз безопасности и больше более элегантных, более читаемых и более быстрых веб-сайтов.

Вы веб-разработчик?

HTML5 делает вашу жизнь невероятно легкой и значительно расширяет возможности. Это также означает, что вы сможете создавать страницы и больше полагаться на разработчиков браузеров, чтобы обеспечить согласованность. Это означает гораздо меньше условного кода в макетах.

Вы хотите создать веб-браузер?

С одной стороны, у вас будет отличная дорожная карта в спецификации HTML5, в которой подробно описано, как и что вы должны строить. С другой стороны, есть еще кое-что. Совсем не так просто будет отличить ваш браузер от крупных производителей браузеров.

Хотите узнать больше?

Просто быстрое напоминание, прежде чем мы погрузимся! Я стараюсь участвовать в обсуждениях ниже. Если у вас есть вопрос или тема для будущего учебника, пожалуйста, напишите комментарий ниже или свяжитесь со мной в Twitter @reifman.

Предистория HTML5

Откуда выходит HTML5?

HTML5 является последним за более чем 20 лет стандартов программирования браузера с момента запуска Интернета в 1991 году.

История HTML

HTML впервые появился в качестве стандарта в 1993 году, и вот график версий HTML, принятых комитетами по стандартам:

Цели HTML5

Согласно Википедии, HTML5 предназначен для консолидации более ранних версий и дифференцированных типов документов, таких как XHTML 1 и DOM Level 2 HTML:

Вот краткое описание того, как MakeUseOf объясняет цели HTML5:

Какие новые возможности предлагает HTML5?

Выходи что очень много! HTML5 предоставляет такой впечатляющий список новых возможностей, которые основные браузеры по-прежнему не полностью еще поддерживают даже через 18 месяцев после его принятия:

Там также эта интерактивная визуальная радуга в HTML5Readiness. Наведите указатель мыши на разные дуги, и вы увидите, какие функции поддерживаются браузерами:

Это весело, но другие диаграммы на других сайтах могут быть более функционально интуитивными в использовании.

Уровни поддержки HTML5

В 2011 году Wikipedia сообщила, что около трети из 100 лучших веб-сайтов поддерживали некоторые возможности HTML5. К августу 2013 года было сделано около 153 сайтов из списка Fortune 500.

Вот визуализация огромности возможностей HTML5:

Новые элементы HTML5

Самые основные новые элементы HTML5 облегчают выкладку веб-страниц и отладку кода. Это также облегчает автоматические услуги для сканирования документов в Интернете и понимания важности различных компонентов страницы.

Для макета страницы и ключевых функций в настоящее время существуют определенные элементы, такие как:

Вот хороший визуальный очерк их Smashing Magazine:

Вот некоторые из более продвинутых функций HTML5, включая интеграцию API, что делает программирование в JavaScript для сложных действий более простым и последовательным в браузерах:

Google Gears предоставил нам автономное хранилище данных, и Flash познакомил нас с кешем приложений (Pandora использует его для сохранения вашей информации в журнале). Благодаря HTML5 эти возможности теперь доступны для использования прямо в браузере и могут быть легко расширены с помощью JavaScript.

Нужно выяснить, какие функции поддерживаются в браузерах? HTML5Test имеет полезную интерактивную оценку функций и поддержки браузера:

Существует так много новых функций, что невозможно создать каталог и упомянуть здесь все из них. Проверьте ссылки ресурсов внизу этого руководства для более глубоких ресурсов, которые я рекомендую.

Несколько примеров HTML5 в действии

Давайте рассмотрим несколько интересных примеров HTML5 в действии.

Страница Boilerplate HTML5

Простота HTML5 понятна в новых макетах страниц. Чем больше элементов, ориентированных на контент, тем легче понять код страницы и отладить. Вот простой пример, который я построил с помощью проекта HTML5-Reset:

Обратите внимание, что есть более простой тег doctype, теги ссылок и теги скриптов. Сценарий HTML5Shiv обеспечивает устаревшую поддержку версий Internet Explorer до 9.x.

Если вы хотите увидеть некоторые другие подходы, ознакомьтесь с HTML5 Boilerplate, более широкой версией HTML5 с открытым исходным кодом.

Элемент video и плейеры

Вот видео-пример из W3Schools, показывающий исходный код слева, и полученный плейер справа:

Нет никакого плагина и нет обновлений.

Формы

HTML5 имеет множество улучшений в формах и элементах ввода, чтобы упростить веб-программирование и улучшить работу пользователя. Например, элементы ввода теперь поддерживают множество встроенных проверок. Вот валидация чисел в определенном диапазоне:

Вот пара отличных уроков для перехода к более продвинутым формам в HTML5 Doctor:

Например, вот демонстрация элемента range, отображаемого в браузере Chrome:

Масштабируемая векторная графика (SVG)

В HTML5 вы можете легко анимировать элементы с помощью JavaScript и HTML5. Вот масштабируемые простые анимированные часы (изменение масштаба):

Вот пример кода для демонстрации выше интеграции JavaScript:

Что дальше?

Надеюсь, вам понравился этот обзор появления и преимуществ HTML5. Если вы хотите еще раз изучить HTML5, есть еще два ресурса, которые я хотел бы предложить:

Вот пример доступных для просмотра демонстраций в HTML5 Demos (не все из них для меня оказались рабочими):

Если вы являетесь менеджером сайта WordPress, как и многие читатели Envato Tuts +, вы можете оценить будущие темы для их соответствия HTML5. Разработка, основанная на стандартах с последовательной поддержкой браузера, делает веб-разработку намного проще для многих из нас и уменьшит количество ошибок, с которыми сталкиваются наши клиенты, в то же время все более обеспечивая лучший пользовательский опыт.

В целом, я очень впечатлен HTML5. И, похоже, он будет продолжать развиваться быстрее, чем каждые 14 лет.

Кроме того, если вы ищете другие утилиты, которые помогут вам развить свои навыки HTML5, не забудьте посмотреть, что у нас есть на Envato Market.

Мне бы хотелось узнать больше в ваших отзывах о HTML5 и предложениях для будущих тем, о которых вы хотели бы узнать больше. Пожалуйста, не стесняйтесь оставлять свои вопросы и комментарии ниже. Вы также можете напрямую связаться со мной в Twitter @reifman. Чтобы увидеть другие учебники, которые я написал, просмотрите страницу инструктора Envato Tuts +.

Ссылки по теме

Поскольку для HTML5 существует так много полезных ресурсов, я включил дополнительную помощь некоторых из тех, которые я считаю наиболее полезными:

Что нужно знать при создании приложений с применением HTML5

Брэндон Сэтром

Продукты и технологии:

Internet Explorer, WebMatrix, Visual Studio 2010, Expression Web 4, Modernizr В

В статье рассматриваются:

HTML5 уже появился, и Web уже никогда не будет прежней.

Несомненно, вы уже слышали об этом. Догадываюсь, что, когда вы это услышали, вы заволновались, закатили глаза или пробормотали «с какой стати?» и слегка нахмурились. А может, вы испытали все эти эмоции.

Я не стал бы винить вас за это. HTML5 — интересная штука, и потенциально он действительно способен несколько изменить ту Web, которую мы знаем сейчас, но не более того. Я сам испытывал подобные эмоции, когда создавал приложения с использованием HTML5. Тематика по HTML5 весьма широкая, поэтому разобраться в ней трудно, особенно если не знаешь, с чего начать изучение этого интересного нового набора технологий.

Это первая статья из целой серии для журнала «MSDN Magazine», цель которой — дать полную картину того, почему первая фраза в этой статье является правильной (и важной). На протяжении нескольких месяцев я попытаюсь помочь вам понять, что HTML5 означает для вас — как для веб-разработчика, так и для разработчика, использующего инструментарий и технологии Microsoft. Я надеюсь упростить некоторые сложности, окружающие HTML5, и развеять многие мифы, возникшие на волне общей шумихи вокруг HTML5. Я также познакомлю вас с некоторыми средствами HTML5, доступными в настоящее время, и рядом интересных технологий, которые, хоть и не достигли должного уровня зрелости, заслуживают пристального внимания. Наконец, я дам кое-какие рекомендации, которые помогут вам задействовать технологии HTML5 уже сейчас, несмотря на то, что вы все еще ведете разработки с учетом пользователей более старых браузеров.

Если вас интересует HTML5, я помогу превратить этот интерес в идеи, которые вы сможете немедленно реализовать на практике. Если же вы настроены скептически, я помогу понять, в чем заключается важность HTML5. А если вы даже не понимаете, что означает HTML5, не бойтесь: об этом мы поговорим в первой же статье из этой серии.

Что такое HTML5?

К этому моменту вы, вероятно, поняли, что под HTML5 разные люди подразумевают разные вещи. Для некоторых это просто новые теги вроде и и масса новых атрибутов, доступных в разметке. Для других это все новое и интересное в Web, в том числе технологии, реализованные всего в одном из браузеров, или какие-то спецификации, официально не включенные в HTML5. Поэтому для начала нужно разобраться в том, чем на самом деле является HTML5.

И, если честно, такому разнообразию толкований можно найти оправдание. HTML5 огромен! Формально определенный организацией международных стандартов World Wide Web Consortium (W3C), HTML5 состоит из более чем 100 спецификаций, относящихся к веб-технологиям нового поколения. Хотя охватить разом столь широкое понятие, как HTML5, и недвусмысленно определить его очень трудно, я считаю, что W3C пыталась ввести HTML5 как обобщающую концепцию перемен, происходящих в Web.

По сути, HTML5 — широкий термин, описывающий набор спецификаций HTML, CSS и JavaScript, разработанных для создания веб-сайтов и приложений нового поколения. Примечательно, что в этом определении есть три части: HTML, CSS и JavaScript. Они определяют, как разработчики должны использовать улучшенную разметку, более богатые стилевые возможности и новые JavaScript API. Проще говоря, HTML5 = HTML + CSS + JavaScript.

Вот и все. HTML5 — это совокупные изменения в HTML, CSS и JavaScript. Эти три термина описывают всю широту и масштаб HTML5. Вы по-прежнему думаете, что это некоторое упрощение? Возможно, но, как вы вскоре увидите, исчерпывающее определение HTML5 не столь значимо по сравнению с технологиями, которые вы выбираете и считаете заслуживающими вашего времени и сил в освоении.

Покончив с определением, потратим несколько минут на позицию Microsoft в отношении HTML5.

HTML5 и Internet Explorer

Как я уже упоминал, набором спецификаций, образующих HTML5, управляет W3C. W3C состоит из персонала, организаций и индивидуальных лиц, заинтересованных в развитии и определении будущего Web. WC3 действует на основе консенсуса и, как правило, формирует комитеты (называемые рабочими группами) для деления работы над спецификациями на части. Спецификации могут предлагаться любым членом, и все спецификации, которыми владеет W3C — их куда больше тех, что относятся к общему термину HTML5, — проходят пятиступенчатый процесс от первого чернового варианта до официальной рекомендации.

Microsoft является членом W3C и играет очень активную роль в процессе выработки спецификаций для многих стандартов HTML5, а также участвует в рабочих группах. Как и все основные поставщики браузеров, Microsoft внесла большой вклад в HTML5 и работает с W3C и другими организациями, чтобы обеспечить надежную и совместимую реализацию технологий HTML5 во всех основных браузерах.

В этом контексте подход Microsoft сводится к четырем пунктам.

Под термином «Site-Ready HTML5» Microsoft подразумевает технологии HTML5, которые можно использовать уже сегодня благодаря широкой поддержке со стороны всех основных браузеров. Технологии вроде новых HTML-тегов, Canvas, Scalable Vector Graphics, Audio and Video, Geolocation, Web Storage и многих новых модулей CSS3 — все попадают под эту категорию, и все они реализованы в Internet Explorer 9, равно как и в других мейнстримовых браузерах. Я предполагаю отвести в этой серии статей немалое время на обсуждение данных технологий, а также тому, как вы можете внедрять их уже сегодня.

Помимо того, что доступно в настоящее время, Microsoft использует общедоступные Platform Preview для информирования разработчиков о том, что появится в следующей версии браузера, и сбора замечаний и предложений. В случае Internet Explorer 9 компания Microsoft выпускала Platform Preview через каждые шесть-восемь недель, объявляя при этом о новых усовершенствованиях, функционале и повышении быстродействия HTML5 и предлагая разработчикам самим опробовать и оценить очередную предварительную версию. Internet Explorer 9 был выпущен в марте, а уже в начале июля Microsoft выпустила две Platform Preview для Internet Explorer 10, сигнализируя тем самым, что Microsoft продолжает регулярный выпуск предварительных версий новых наработок для Internet Explorer. Как разработчик вы наверняка захотите посмотреть новейшие наработки, чтобы проверить их в деле и повлиять на дальнейшее развитие этого браузера. Вы можете скачать новейшую предварительную версию платформы Internet Explorer с сайта IETestDrive.com.

Чтобы добиться согласованной работы HTML5 между всеми браузерами, Microsoft вносит активный вклад в обеспечение совместимости, создавая и передавая в W3C единый крупнейший набор тестов, относящихся к HTML5. Впервые этот набор будет использоваться W3C как авторитетный источник при проверке «готовности» HTML5 в каждом браузере. В конечном счете результат таков, что мы можем один раз внедрить и реализовать технологии HTML5, а потом быть уверенными, что они будут согласованно работать во всех браузерах. Подробнее о работах Microsoft в этой области см. по ссылке bit.ly/dxB12S.

Хотя некоторые технологии HTML5 уже имеются в Internet Explorer 9, а другие заявлены для Internet Explorer 10 через Internet Explorer Platform Previews, некоторые популярные и важные спецификации нуждаются в доработке W3C и поставщиками браузеров до того, как они будут готовы к реализации в наших приложениях. Один из примеров — Web Sockets, потрясающе интересная спецификация, которая позволяет разработчикам устанавливать двухсторонние коммуникационные каналы с внутренними серверами (back-end servers), что открывает веб-приложениям недоступные прежде возможности поддержки соединений уровня «реального времени». Как разработчик вы, несомненно, можете вообразить бесчисленные области применения Web Sockets даже в тех приложениях, которые вы создаете прямо сейчас. Но спецификация Web Sockets все еще быстро меняется, ее ключевые аспекты активно обсуждаются в W3C. С учетом этой ситуации на данный момент эту технологию было бы затруднительно реализовать согласованно и надежно в разных браузерах.

Для неустоявшихся или развивающихся спецификаций вроде Web Sockets (которые я подробно рассмотрю в следующей статье) Microsoft создала HTML5 Labs — сайт для разработчиков, где можно поэкспериментировать с черновыми реализациями этих технологий. Этот сайт предоставляет прототипы, которые можно скачать и опробовать локально, а некоторые спецификации можно посмотреть в виде демонстраций. Цель — создать такое место, где можно самостоятельно экспериментировать с этими спецификациями и сообщать свои замечания как Microsoft, так и W3C. Подробнее о HTML5 Labs см. на сайте html5labs.com.

HTML5 и средства разработки Microsoft

Помимо участия в работе W3C и поддержки спецификаций HTML5 в браузере, есть и другой аспект в подходе Microsoft к HTML5, важный для разработчиков: инструментарий для HTML5.

В начале 2011 года Microsoft обновила два своих инструмента разработки: Visual Studio 2010 и Expression Web 4. В пакеты обновлений была включен тип документов HTML5 для проверки, а также поддержка IntelliSense для новых тегов и атрибутов HTML5. Если вы используете Visual Studio 2010 SP1, то можете включить HTML5 Schema, выбрав Tools | Options | Text Editor | HTML | Validation, а затем указав HTML5 в раскрывающемся списке Target, как показано на рис. 1. Вы также можете установить HTML5 как схему по умолчанию из HTML Source Editing Toolbar в любом HTML-файле (рис. 2).

Рис. 1. Включение HTML5 Schema через диалог Options

Рис. 2. Задание HTML5 Schema в HTML Source Editing Toolbar

Задав схему по умолчанию, вы получите поддержку IntelliSense в Visual Studio для 28 новых семантических HTML-тегов, а также новых глобальных и специфических для конкретных тегов атрибутов (рис. 3).

Рис. 3. HTML5 IntelliSense в Visual Studio 2010 SP1

Очередное обновление поддержки HTML5 произошло в июне 2011 года с выпуском Web Standards Update for Microsoft Visual Studio 2010 SP1. Это расширение, работающее со всеми редакциями Visual Studio 2010, добавляет дополнительную поддержку HTML5 IntelliSense и проверки в Visual Studio, включает JavaScript IntelliSense для новых возможностей браузера вроде Geolocation и DOM Storage, а также предоставляет обширную поддержку CSS3 IntelliSense и проверку. Вы можете скачать это обновление, которое будет регулярно обновляться с целью совершенствования инструментария для разработки под HTML5, по ссылке bit.ly/m7OB13.

В Expression Web 4 SP1 предлагается та же поддержка IntelliSense, если вы укажете схему HTML5 в Tools | Page Options, а также CSS3 IntelliSense для нескольких черновых модулей CSS3.

Рис. 4. HTML-документ по умолчанию в WebMatrix

Если вам мало этого нового инструментария HTML5, то для ASP.NET MVC недавно вышел пакет ASP.NET MVC 3 Tools Update, объявленный на конференции MIX11 в апреле. Наряду с различными новыми средствами ASP.NET MVC 3 Tools Update предоставляет возможность использовать HTML5 doctype в новых проектах и помещает Modernizr 1.7 в папку Scripts новых приложений. Modernizr — это библиотека JavaScript, которая значительно упрощает разработку с применением HTML5; о ней мы поговорим в будущей статье.

Сухой остаток заключается в том, что, хотя HTML5 только появляется в наших браузерах, его официальная поддержка быстро добавляется в инструментарий, и Microsoft даже добавляет поддержку библиотек (вроде Modernizr), разработанных сообществом. Таким образом, вы уже сейчас можете ориентироваться на HTML5 с некоторой помощью со стороны инструментария Microsoft и ожидать, что поддержка HTML5 и в дальнейшем будет расширяться и улучшаться.

«Внедрение» HTML5 в ваши приложения

К этому моменту вы уже поняли, что HTML5 не является единой сущностью, которую можно внедрить или на которую можно перейти одним махом. Внедрение HTML5 заключается в оценке каждой технологии и принятии решений о том, какие из них подходят для вашего приложения. Оценивая каждую технологию HTML5 и решая, готова ли она для принятия вами, принимайте во внимание (как минимум) следующие факторы:

Первый фактор наиболее важен, и при понимании того, какие браузеры чаще всего используются посетителями вашего сайта, он должен дать четкую картину о подмножестве из ста с лишним спецификаций, которое имеет смысл рассматривать дальше. Это подмножество должно состоять из набора устоявшихся спецификаций, которые можно надежно внедрять для ваших пользователей уже сегодня.

Однако даже с этим набором не следует игнорировать пользователей, не переходящих на более новые браузеры. Если вы ежедневно активно занимаетесь разработкой для своего сайта, то, несомненно, хотя бы примерно представляете доли браузеров, используемых посетителями сайта. Большинству из нас будет легко увидеть процент пользователей с устаревшими браузерами и прийти к выводу, что внедрение любых технологий HTML5 негативно скажется на этих пользователях. К счастью, есть такая методика, как «поли-заполнение» («polyfilling»), избавляющая нас от ожидания некоей расплывчатой даты в будущем, когда мы сможем уверенно внедрять HTML5.

Пол Айриш (Paul Irish) (разработчик проектов jQuery и Modernizr) определяет поли-заполнение как «…тонкая прослойка, которая имитирует будущий API и предоставляет выпадающую функциональность для устаревших браузеров». Эта прослойка подобна шпаклевке для веб-сайтов; она позволяет определить, доступна ли конкретная функция HTML5 пользователю, который в данный момент просматривает ваш сайт, и предоставить ему либо имитацию ее поддержки, либо корректно сократить функциональность сайта.

Наиболее популярная библиотека, использующая поли-заполнение, — Modernizr, библиотека JavaScript, о которой я уже упоминал. Modernizr предоставляет некоторые базовые средства поли-заполнения для семантической разметки, распознавание поддержки функций браузером для большинства технологий HTML5 и поддержку условного CSS в зависимости от поддерживаемых функций. Как отмечалось, Modernizr будет предметом обсуждения в следующей статье; кроме того, ее средства (наряду со средствами многих других библиотек поли-заполнения) будут использоваться в примерах на протяжении всей серии статей. Чтобы узнать больше, скачайте Modernizr с сайта modernizr.com.

Когда дело доходит до выбора внедряемых технологий, ваш финальный список может оказаться комбинацией широко поддерживаемых спецификаций и спецификаций, которые потребуют поддержки поли-заполнения для определенных браузеров.

В предстоящих статьях мы обсудим несколько значимых спецификаций — от Geolocation и Forms and Canvas до Web Workers, Web Sockets и IndexedDB. Некоторые из них широко поддерживаются и готовы к использованию уже сегодня, а некоторые (вроде Web Sockets) являются настолько прорывными, что их нельзя игнорировать даже несмотря на то, что на сегодняшний день они еще не устоялись.

Если вы хотите побольше узнать о HTML5 прямо сейчас, могу посоветовать несколько книг по этой тематике. В частности, рекомендую прочитать книги Брюса Лоусона (Bruce Lawson) и Реми Шарп (Remy Sharp) «Introducing HTML5» (New Riders, 2010) и Марка Пилгрима (Mark Pilgrim) «HTML5 Up and Running» (O’Reilly Media, 2010). Кроме того, обязательно посетите сайт W3C.org, где вы найдете актуальную информацию по всем спецификациям, а также сайты BeautyoftheWeb.com и IETestDrive.com, чтобы скачать соответственно Internet Explorer 9 и Internet Explorer 10 Platform Preview и узнать больше о поддерживаемых Microsoft технологиях HTML5 в этих браузерах.

Помимо всего прочего, начинайте внедрять HTML5. Web уже никогда не будет прежней, это правда, и вы сможете стать частичкой движущей силы этих перемен, создавая веб-приложения нового поколения с использованием HTML5.

Брэндон Сэтром — разработчик-идеолог в Microsoft. Ведет блог UserInexperience.com и пишет заметки в Twitter.com/BrandonSatrom.

Выражаю благодарность за рецензирование статьи экспертам Джону Боксу (Jon Box), Демьяну Эдвардсу (Damian Edwards) иКларку Селлу (Clark Sell).

Зачем нам нужен HTML5: пять простых ответов

Все вы наверняка хоть что-то слышали о HTML5 — новой версии языка разметки страниц в интернете. Она до сих пор считается находящейся в разработке, хотя со времени официального утверждения действующей версии HTML4 прошло более пятнадцати лет — фактически всё время активного развития Всемирной сети. В чём же заключаются преимущества HTML5 и принципиальные его отличия от HTML4?

1. HTML5 — новый подход к разметке: мультимедиа внутри

В отличие от разработанного ещё в девяностых языка разметки HTML4, когда даже относительно несложный мультимедийный контент был слишком «тяжёлым» для подавляющего большинства пользователей интернета, в 2004 году, в котором фактически началась работа над новой версией стандарта, в Сети уже вовсю шло распространение аудио- и видеозаписей, как официальное, так и неофициальное. Хорошим тоном для веб-сайтов стало размещение на своих страницах анимационных фильмов и видеороликов, вошли в моду аудиоблоги-подкасты.

Однако действующий стандарт не предусматривал описания мультимедийного контента средствами самого языка: для этого использовалась функция вставки некоего объекта («object»), возможность воспроизведения которого зависела от того, установлены ли в браузере клиента совместимые с таким контентом дополнительные плагины третьих разработчиков.

Говоря о подобных плагинах, мы прежде всего имеем в виду Adobe Flash, QuickTime или менее распространённые Real Player и Silverlight. Всё это — «надстройки», дополнения к браузерам, не являющиеся их составной частью и выполняющие роль неких посредников, которые преобразуют загружаемый цифровой контент в видео и звук.

Эта система до сих пор вполне работоспособна, однако отсутствие общепринятых стандартов приводит к тому, что на разных сайтах используются разные технологии, для просмотра их медиаконтента требуются разные плагины и, самое главное, поскольку такие плагины не входят непосредственно в составе браузера, необходима их отдельная установка.

В стандарте HTML5, представляющем собой сочетание собственно HTML, а также CSS и JavaScript, изначально реализуется принципиально иной подход, в котором медиаконтент представляет собой неотъемлемую часть кода страницы. HTML5 обеспечивает единый стандартный способ описания (синтаксис) встраиваемого в страницы аудиовизуального контента.

Для интеграции аудио или видео в HTML5 достаточно использовать простой набор тэгов, описывающих, какой тип контента вы намерены поместить («video» или «audio»), и обычные ссылки на соответствующие медиафайлы.

Разумеется, у HTML5 есть и множество других нововведений, но это самое главное из них — изменение идеологического подхода.

2. Проблема обратной совместимости: сначала HTML, потом плагины

К сожалению, в мире остаётся значительная часть пользователей, у которых установлены устаревшие браузеры, вполне их устраивающие, но не поддерживающие все возможности HTML5. Прежде всего, речь идёт об Internet Explorer версии 8, до сих пор считающейся самой популярной для этого браузера. Последующие версии — IE 9 и 10 — уже практически полностью поддерживают HTML5. Что касается Chrome, Opera и Safari, то они уже в течение нескольких лет способны обрабатывать теги «video» и «audio».

Тем не менее для обеспечения обратной совместимость в HTML5 сохраняется поддержка использования плагинов (тега «object»), но по схеме «сначала HTML, а потом уже плагины». Это означает, что браузер должен сначала осуществлять рендеринг страницы с использованием тегов «video» и «audio» — и лишь при невозможности сделать это применять код плагинов.

Для обеспечения правильного функционирования такого подхода можно использовать одну из множества доступных библиотек JavaScript, часть из которых предоставляет полностью интегрированный программный интерфейс (API) для управления как HTML-контентом, так и встроенными объектами. Среди них, в частности, можно назвать Projekktor или программный видеоплеер Video.js, обеспечивающие полную совместимость как с HTML5, так и со старыми браузерами, в которых применяются плагины.

3. Единый подход к десктопным и мобильным платформам

Поддержка нового стандарта HTML5 обеспечивается и практически на всех современных мобильных устройствах, включая iOS, Android и Windows Phone, в чём заключается ещё одно его важное достоинство. Веб-мастеру уже не нужно размещать несколько версий медиаконтента для «полноценных» компьютеров и мобильных устройств. Известно, что iOS полностью несовместима с Flash, а ОС Android совместима лишь частично. В случае с HTML5 эта проблема полностью снимается.

Кроме того, многие современные мобильные устройства поддерживают аппаратное декодирование видео в широко распространённом формате H.264, что вновь избавляет веб-мастеров от лишней работы и необходимости выкладывания видео в нескольких разных кодеках. Владельцы же таких устройств получают низкую нагрузку на систему и длительное время автономной работы.

4. Поддержка разных форматов видео и звука

Несмотря на то что HTML5 позволяет размещать на веб-страницах медиафайлы простыми стандартными тэгами, такие файлы могут быть закодированы в самые разные форматы и самыми разными кодеками. Между тем пока не существует какого-то стандартного сочетания формата (контейнера) и кодека, которое с равным успехом работало бы во всех браузерах и мобильных системах.

Самые популярные контейнеры для интернет-видео — это AVI, MP4, FLV и WebM, а основных «сетевых» видеокодеков всего три: H.264, Ogg Theora и VP8. При этом каждому кодеку обычно (но далеко не всегда) лучше всего соответствует свой формат контейнера: H.264 — MP4, Theora — OGG, VP8 — WebV.

Кодек H.264 сжимает видео с потерями, чтобы получить файл высокого качества, но небольшого размера. При этом спецификация предусматривает несколько профилей с разным качеством и степенью сжатия, чтобы на маломощные мобильные устройства можно было транслировать «лёгкие» файлы, а на десктопы с широкополосными доступом — более качественное видео.

Хотя H.264 — коммерческий кодек, то есть предполагает лицензионные отчисления, он наиболее универсален: его встроенная поддержка есть в Internet Explorer, Chrome, Firefox, Safari, iOS и Android, а отсутствует лишь в Opera, где такое видео декодируется только через внешний плагин.

Кодек Ogg Theora, изначально рассчитанный на системы под Linux, вначале тоже был коммерческим, но теперь лицензируется бесплатно. Встроенная поддержка имеется в браузерах Chrome, Firefox и Opera, в Internet Explorer и Safari доступен только через плагины.

Кодек VP8, ориентированный на мобильные устройства, распространяется Google на условиях Open Source и обеспечивает качество, сходное с H.264, при меньшей сложности декодирования. Встроенная поддержка есть в Chrome, Firefox и Opera, а также в мобильных устройствах под управлением Android.

Таким образом, чтобы обеспечить воспроизведение видеоконтента практически на всех существующих системах, достаточно выкладывать файлы в контейнерах MP4 в стандарте кодирования H.264 и в формате WebM с кодеком VP8. Поскольку изо всех современных десктопных браузеров встроенная поддержка H.264 отсутствует только в Opera, такие сочетания будут самыми универсальными.

5. Существует обширная общедоступная документация

Несмотря на то что HTML5 пока ещё не имеет статуса окончательного стандарта, его поддерживает подавляющее большинство современных браузеров и мобильных устройств. Потому не удивительно, что для веб-разработчиков уже существует обширная общедоступная документация — большая часть которой, естественно, опубликована на английском языке.

Прежде всего речь об официальной последней рабочей версии консорциума W3C, в рамках которого ведётся непосредственная разработка HTML5.

На сайте разработчиков Mozilla приводится справочник тэгов, причём элементы, которые были добавлены в HTML5, выделены особо.

Подробные описания подхода к интеграции видео в HTML5 можно найти здесь и здесь (тоже на английском языке).

На русском языке краткий справочник HTML5 с примерами применения новых элементов имеется на сайте Puzzleweb.ru.

Кроме того, на русский язык переведено уже довольно много книг по HTML5, среди которых, например, «HTML5 для профессионалов», «Погружение в HTML5» или «Самоучитель HTML5».

Что нужно знать при создании приложений с применением HTML5

HTML5 уже появился, и Web уже никогда не будет прежней.

Несомненно, вы уже слышали об этом. Догадываюсь, что, когда вы это услышали, вы заволновались, закатили глаза или пробормотали «с какой стати?» и слегка нахмурились. А может, вы испытали все эти эмоции.

Я не стал бы винить вас за это. HTML5 — интересная штука, и потенциально он действительно способен несколько изменить ту Web, которую мы знаем сейчас, но не более того. Я сам испытывал подобные эмоции, когда создавал приложения с использованием HTML5. Тематика по HTML5 весьма широкая, поэтому разобраться в ней трудно, особенно если не знаешь, с чего начать изучение этого интересного нового набора технологий.

Это первая статья из целой серии для журнала «MSDN Magazine», цель которой — дать полную картину того, почему первая фраза в этой статье является правильной (и важной). На протяжении нескольких месяцев я попытаюсь помочь вам понять, что HTML5 означает для вас — как для веб-разработчика, так и для разработчика, использующего инструментарий и технологии Microsoft. Я надеюсь упростить некоторые сложности, окружающие HTML5, и развеять многие мифы, возникшие на волне общей шумихи вокруг HTML5. Я также познакомлю вас с некоторыми средствами HTML5, доступными в настоящее время, и рядом интересных технологий, которые, хоть и не достигли должного уровня зрелости, заслуживают пристального внимания. Наконец, я дам кое-какие рекомендации, которые помогут вам задействовать технологии HTML5 уже сейчас, несмотря на то, что вы все еще ведете разработки с учетом пользователей более старых браузеров.

Если вас интересует HTML5, я помогу превратить этот интерес в идеи, которые вы сможете немедленно реализовать на практике. Если же вы настроены скептически, я помогу понять, в чем заключается важность HTML5. А если вы даже не понимаете, что означает HTML5, не бойтесь: об этом мы поговорим в первой же статье из этой серии.

Что такое HTML5?

К этому моменту вы, вероятно, поняли, что под HTML5 разные люди подразумевают разные вещи. Для некоторых это просто новые теги вроде и и масса новых атрибутов, доступных в разметке. Для других это все новое и интересное в Web, в том числе технологии, реализованные всего в одном из браузеров, или какие-то спецификации, официально не включенные в HTML5. Поэтому для начала нужно разобраться в том, чем на самом деле является HTML5.

И, если честно, такому разнообразию толкований можно найти оправдание. HTML5 огромен! Формально определенный организацией международных стандартов World Wide Web Consortium (W3C), HTML5 состоит из более чем 100 спецификаций, относящихся к веб-технологиям нового поколения. Хотя охватить разом столь широкое понятие, как HTML5, и недвусмысленно определить его очень трудно, я считаю, что W3C пыталась ввести HTML5 как обобщающую концепцию перемен, происходящих в Web.

По сути, HTML5 — широкий термин, описывающий набор спецификаций HTML, CSS и JavaScript, разработанных для создания веб-сайтов и приложений нового поколения. Примечательно, что в этом определении есть три части: HTML, CSS и JavaScript. Они определяют, как разработчики должны использовать улучшенную разметку, более богатые стилевые возможности и новые JavaScript API. Проще говоря, HTML5 = HTML + CSS + JavaScript.

Вот и все. HTML5 — это совокупные изменения в HTML, CSS и JavaScript. Эти три термина описывают всю широту и масштаб HTML5. Вы по-прежнему думаете, что это некоторое упрощение? Возможно, но, как вы вскоре увидите, исчерпывающее определение HTML5 не столь значимо по сравнению с технологиями, которые вы выбираете и считаете заслуживающими вашего времени и сил в освоении.

Покончив с определением, потратим несколько минут на позицию Microsoft в отношении HTML5.

HTML5 и Internet Explorer

Как я уже упоминал, набором спецификаций, образующих HTML5, управляет W3C. W3C состоит из персонала, организаций и индивидуальных лиц, заинтересованных в развитии и определении будущего Web. WC3 действует на основе консенсуса и, как правило, формирует комитеты (называемые рабочими группами) для деления работы над спецификациями на части. Спецификации могут предлагаться любым членом, и все спецификации, которыми владеет W3C — их куда больше тех, что относятся к общему термину HTML5, — проходят пятиступенчатый процесс от первого чернового варианта до официальной рекомендации.

Microsoft является членом W3C и играет очень активную роль в процессе выработки спецификаций для многих стандартов HTML5, а также участвует в рабочих группах. Как и все основные поставщики браузеров, Microsoft внесла большой вклад в HTML5 и работает с W3C и другими организациями, чтобы обеспечить надежную и совместимую реализацию технологий HTML5 во всех основных браузерах.

В этом контексте подход Microsoft сводится к четырем пунктам.

Под термином «Site-Ready HTML5» Microsoft подразумевает технологии HTML5, которые можно использовать уже сегодня благодаря широкой поддержке со стороны всех основных браузеров. Технологии вроде новых HTML-тегов, Canvas, Scalable Vector Graphics, Audio and Video, Geolocation, Web Storage и многих новых модулей CSS3 — все попадают под эту категорию, и все они реализованы в Internet Explorer 9, равно как и в других мейнстримовых браузерах. Я предполагаю отвести в этой серии статей немалое время на обсуждение данных технологий, а также тому, как вы можете внедрять их уже сегодня.

Помимо того, что доступно в настоящее время, Microsoft использует общедоступные Platform Preview для информирования разработчиков о том, что появится в следующей версии браузера, и сбора замечаний и предложений. В случае Internet Explorer 9 компания Microsoft выпускала Platform Preview через каждые шесть-восемь недель, объявляя при этом о новых усовершенствованиях, функционале и повышении быстродействия HTML5 и предлагая разработчикам самим опробовать и оценить очередную предварительную версию. Internet Explorer 9 был выпущен в марте, а уже в начале июля Microsoft выпустила две Platform Preview для Internet Explorer 10, сигнализируя тем самым, что Microsoft продолжает регулярный выпуск предварительных версий новых наработок для Internet Explorer. Как разработчик вы наверняка захотите посмотреть новейшие наработки, чтобы проверить их в деле и повлиять на дальнейшее развитие этого браузера. Вы можете скачать новейшую предварительную версию платформы Internet Explorer с сайта IETestDrive.com.

Чтобы добиться согласованной работы HTML5 между всеми браузерами, Microsoft вносит активный вклад в обеспечение совместимости, создавая и передавая в W3C единый крупнейший набор тестов, относящихся к HTML5. Впервые этот набор будет использоваться W3C как авторитетный источник при проверке «готовности» HTML5 в каждом браузере. В конечном счете результат таков, что мы можем один раз внедрить и реализовать технологии HTML5, а потом быть уверенными, что они будут согласованно работать во всех браузерах. Подробнее о работах Microsoft в этой области см. по ссылке bit.ly/dxB12S.

Хотя некоторые технологии HTML5 уже имеются в Internet Explorer 9, а другие заявлены для Internet Explorer 10 через Internet Explorer Platform Previews, некоторые популярные и важные спецификации нуждаются в доработке W3C и поставщиками браузеров до того, как они будут готовы к реализации в наших приложениях. Один из примеров — Web Sockets, потрясающе интересная спецификация, которая позволяет разработчикам устанавливать двухсторонние коммуникационные каналы с внутренними серверами (back-end servers), что открывает веб-приложениям недоступные прежде возможности поддержки соединений уровня «реального времени». Как разработчик вы, несомненно, можете вообразить бесчисленные области применения Web Sockets даже в тех приложениях, которые вы создаете прямо сейчас. Но спецификация Web Sockets все еще быстро меняется, ее ключевые аспекты активно обсуждаются в W3C. С учетом этой ситуации на данный момент эту технологию было бы затруднительно реализовать согласованно и надежно в разных браузерах.

Для неустоявшихся или развивающихся спецификаций вроде Web Sockets (которые я подробно рассмотрю в следующей статье) Microsoft создала HTML5 Labs — сайт для разработчиков, где можно поэкспериментировать с черновыми реализациями этих технологий. Этот сайт предоставляет прототипы, которые можно скачать и опробовать локально, а некоторые спецификации можно посмотреть в виде демонстраций. Цель — создать такое место, где можно самостоятельно экспериментировать с этими спецификациями и сообщать свои замечания как Microsoft, так и W3C. Подробнее о HTML5 Labs см. на сайте html5labs.com.

HTML5 и средства разработки Microsoft

Помимо участия в работе W3C и поддержки спецификаций HTML5 в браузере, есть и другой аспект в подходе Microsoft к HTML5, важный для разработчиков: инструментарий для HTML5.

В начале 2011 года Microsoft обновила два своих инструмента разработки: Visual Studio 2010 и Expression Web 4. В пакеты обновлений была включен тип документов HTML5 для проверки, а также поддержка IntelliSense для новых тегов и атрибутов HTML5. Если вы используете Visual Studio 2010 SP1, то можете включить HTML5 Schema, выбрав Tools | Options | Text Editor | HTML | Validation, а затем указав HTML5 в раскрывающемся списке Target, как показано на рис. 1. Вы также можете установить HTML5 как схему по умолчанию из HTML Source Editing Toolbar в любом HTML-файле (рис. 2).

Рис. 1. Включение HTML5 Schema через диалог Options

Рис. 2. Задание HTML5 Schema в HTML Source Editing Toolbar

Задав схему по умолчанию, вы получите поддержку IntelliSense в Visual Studio для 28 новых семантических HTML-тегов, а также новых глобальных и специфических для конкретных тегов атрибутов (рис. 3).

Рис. 3. HTML5 IntelliSense в Visual Studio 2010 SP1

Очередное обновление поддержки HTML5 произошло в июне 2011 года с выпуском Web Standards Update for Microsoft Visual Studio 2010 SP1. Это расширение, работающее со всеми редакциями Visual Studio 2010, добавляет дополнительную поддержку HTML5 IntelliSense и проверки в Visual Studio, включает JavaScript IntelliSense для новых возможностей браузера вроде Geolocation и DOM Storage, а также предоставляет обширную поддержку CSS3 IntelliSense и проверку. Вы можете скачать это обновление, которое будет регулярно обновляться с целью совершенствования инструментария для разработки под HTML5, по ссылке bit.ly/m7OB13.

В Expression Web 4 SP1 предлагается та же поддержка IntelliSense, если вы укажете схему HTML5 в Tools | Page Options, а также CSS3 IntelliSense для нескольких черновых модулей CSS3.

Рис. 4. HTML-документ по умолчанию в WebMatrix

Если вам мало этого нового инструментария HTML5, то для ASP.NET MVC недавно вышел пакет ASP.NET MVC 3 Tools Update, объявленный на конференции MIX11 в апреле. Наряду с различными новыми средствами ASP.NET MVC 3 Tools Update предоставляет возможность использовать HTML5 doctype в новых проектах и помещает Modernizr 1.7 в папку Scripts новых приложений. Modernizr — это библиотека JavaScript, которая значительно упрощает разработку с применением HTML5; о ней мы поговорим в будущей статье.

Сухой остаток заключается в том, что, хотя HTML5 только появляется в наших браузерах, его официальная поддержка быстро добавляется в инструментарий, и Microsoft даже добавляет поддержку библиотек (вроде Modernizr), разработанных сообществом. Таким образом, вы уже сейчас можете ориентироваться на HTML5 с некоторой помощью со стороны инструментария Microsoft и ожидать, что поддержка HTML5 и в дальнейшем будет расширяться и улучшаться.

«Внедрение» HTML5 в ваши приложения

К этому моменту вы уже поняли, что HTML5 не является единой сущностью, которую можно внедрить или на которую можно перейти одним махом. Внедрение HTML5 заключается в оценке каждой технологии и принятии решений о том, какие из них подходят для вашего приложения. Оценивая каждую технологию HTML5 и решая, готова ли она для принятия вами, принимайте во внимание (как минимум) следующие факторы:

Первый фактор наиболее важен, и при понимании того, какие браузеры чаще всего используются посетителями вашего сайта, он должен дать четкую картину о подмножестве из ста с лишним спецификаций, которое имеет смысл рассматривать дальше. Это подмножество должно состоять из набора устоявшихся спецификаций, которые можно надежно внедрять для ваших пользователей уже сегодня.

Однако даже с этим набором не следует игнорировать пользователей, не переходящих на более новые браузеры. Если вы ежедневно активно занимаетесь разработкой для своего сайта, то, несомненно, хотя бы примерно представляете доли браузеров, используемых посетителями сайта. Большинству из нас будет легко увидеть процент пользователей с устаревшими браузерами и прийти к выводу, что внедрение любых технологий HTML5 негативно скажется на этих пользователях. К счастью, есть такая методика, как «поли-заполнение» («polyfilling»), избавляющая нас от ожидания некоей расплывчатой даты в будущем, когда мы сможем уверенно внедрять HTML5.

Пол Айриш (Paul Irish) (разработчик проектов jQuery и Modernizr) определяет поли-заполнение как «…тонкая прослойка, которая имитирует будущий API и предоставляет выпадающую функциональность для устаревших браузеров». Эта прослойка подобна шпаклевке для веб-сайтов; она позволяет определить, доступна ли конкретная функция HTML5 пользователю, который в данный момент просматривает ваш сайт, и предоставить ему либо имитацию ее поддержки, либо корректно сократить функциональность сайта.

Наиболее популярная библиотека, использующая поли-заполнение, — Modernizr, библиотека JavaScript, о которой я уже упоминал. Modernizr предоставляет некоторые базовые средства поли-заполнения для семантической разметки, распознавание поддержки функций браузером для большинства технологий HTML5 и поддержку условного CSS в зависимости от поддерживаемых функций. Как отмечалось, Modernizr будет предметом обсуждения в следующей статье; кроме того, ее средства (наряду со средствами многих других библиотек поли-заполнения) будут использоваться в примерах на протяжении всей серии статей. Чтобы узнать больше, скачайте Modernizr с сайта modernizr.com.

Когда дело доходит до выбора внедряемых технологий, ваш финальный список может оказаться комбинацией широко поддерживаемых спецификаций и спецификаций, которые потребуют поддержки поли-заполнения для определенных браузеров.

В предстоящих статьях мы обсудим несколько значимых спецификаций — от Geolocation и Forms and Canvas до Web Workers, Web Sockets и IndexedDB. Некоторые из них широко поддерживаются и готовы к использованию уже сегодня, а некоторые (вроде Web Sockets) являются настолько прорывными, что их нельзя игнорировать даже несмотря на то, что на сегодняшний день они еще не устоялись.

Если вы хотите побольше узнать о HTML5 прямо сейчас, могу посоветовать несколько книг по этой тематике. В частности, рекомендую прочитать книги Брюса Лоусона (Bruce Lawson) и Реми Шарп (Remy Sharp) «Introducing HTML5» (New Riders, 2010) и Марка Пилгрима (Mark Pilgrim) «HTML5 Up and Running» (O’Reilly Media, 2010). Кроме того, обязательно посетите сайт W3C.org, где вы найдете актуальную информацию по всем спецификациям, а также сайты BeautyoftheWeb.com и IETestDrive.com, чтобы скачать соответственно Internet Explorer 9 и Internet Explorer 10 Platform Preview и узнать больше о поддерживаемых Microsoft технологиях HTML5 в этих браузерах.

Помимо всего прочего, начинайте внедрять HTML5. Web уже никогда не будет прежней, это правда, и вы сможете стать частичкой движущей силы этих перемен, создавая веб-приложения нового поколения с использованием HTML5.

Apache NetBeans 14

В этом документе описывается создание проекта HTML5 в IDE и некоторые функции в IDE, которые поддерживают использование JavaScript и CSS в используемом проекте. В этом документе будет создано простое приложение HTML5, в котором будет использоваться библиотека JQuery JavaScript для изменения списка на веб-странице.

В настоящем документе также демонстрируется способ установки расширения NetBeans Connector для браузера Chrome из веб-магазина Chrome.

Для просмотра экранного рпредставления этого учебного курса см. Видео по началу работы с приложениями HTML5.

Подробнее о том, как использовать JQuery в веб-приложениях Java NetBeans, см. учебный курс Использование jQuery для усовершенствования внешнего вида и удобства веб-страницы.

Для выполнения этого учебного курса потребуются следующие материалы.

1.0.0 или более поздняя версия

Примечания.

Файл ресурсов проекта в формате zip содержит изображения в формате JPG и файл CSS, который необходимо добавить к проекту в этом учебном курсе.

При сравнении проекта с работающим решением можно загрузить + шаблон сайта+ завершенного проекта.

Предполагается, что читатель обладает базовыми знаниями или опытом программирования на HTML, CSS и JavaScript.

Использование IDE с браузером Chrome

Чтобы воспользоваться некоторыми инструментами, доступными в IDE с поддержкой разработки приложений HTML5, рекомендуется использовать браузер Chrome и установить расширение NetBeans Connector веб-магазина Chrome. Расширение нужно устанавливать только один раз.

После установки расширение NetBeans Connector добавляет в меню ‘Действия NetBeans’, которые доступны из адресной строки URL при запуске проекта NetBeans HTML5 в браузере Chrome. В меню ‘Действия NetBeans’ можно включить проверку в режиме NetBeans и быстро изменить размер окна браузера в соответствии с размерами распространенных устройств отображения. Отладчик JavaScript также включается автоматически при запуске приложения HTML5.

Установка расширения из веб-магазина Chrome

Будет автоматически отображен запрос на установку расширения NetBeans Connector при запуске проекта приложения NetBeans HTML5 из IDE и выборе Chrome с NetBeans Integration в качестве целевого браузера. Это упражнение демонстрирует, как установить расширение путем создания и запуска фиктивного проекта HTML5. Это упражнение можно пропустить и установить расширение при появлении запроса в IDE или установить расширение NetBeans Connector напрямую из веб-магазина Chrome.

Примечание. IDE откроет веб-магазин Chrome в браузере, заданном по умолчанию. Если Chrome не установлен в качестве браузера по умолчанию для IDE, необходимо открыть окно настроек и выбрать Chrome в раскрывающемся списке ‘Веб-браузер’ в категории ‘Общее’, прежде чем выполнить следующие действия.

Выберите в меню «Файл» пункт «Новый проект», чтобы открыть мастер создания проекта.

Выберите ‘Приложение HTML5’ в категории HTML/JavaScript. Нажмите кнопку ‘Далее’.

Задайте имя и местоположение для проекта. Нажмите кнопку ‘Далее’.

Для этого упражнения имя не имеет значения.

Выберите ‘Без шаблона сайта’. Нажмите кнопку ‘Готово’.

Когда вы нажмете кнопку ‘Готово’, IDE создаст новый проект HTML5 и откроет файл index.html в редакторе.

Убедитесь, что на панели инструментов в раскрывающимся списке выбран Chrome с NetBeans Integration.

Нажмите кнопку ‘Выполнить’ на панели инструментов.

Щелкните ‘Перейти к веб-магазину Chrome’ в диалоговом окне ‘Установить расширение Chrome’.

При нажатии кнопки ‘Перейти к веб-магазину Chrome’ страница NetBeans Connector в веб-магазине Chrome откроется в браузере Chrome.

Примечание. В окне ‘Установить расширение Chrome’ отображается кнопка, после щелчка на которой выполняется установка расширения.

Перейдите к браузеру Chrome и нажмите кнопку ‘Добавить в Chrome’ на странице NetBeans Connector. Нажмите кнопку ‘Добавить’ при отображении запроса на подтверждение добавления расширения.

Когда расширение установлено, вы увидите уведомление о том, что расширение добавлено, а значок NetBeans Connector будет отображаться в адресной строке URL при запуске проекта NetBeans HTML5 в браузере Chrome.

В IDE нажмите ‘Повторно запустить проект’ в диалоговом окне ‘Установить расширение Chrome’.

После нажатия ‘Повторно запустить проект’ в браузере Chrome откроется новая вкладка и отобразится страница индексов приложений HTML5.

После установки расширения вы увидите, что значок NetBeans Connector будет отображаться в адресной строке URL при запуске проекта NetBeans HTML5 в браузере Chrome.

При открытии страницы расширений Chrome ( chrome://extensions/ ) для браузера Chrome вы увидите, что расширение в настоящее время включено.

Примечание. Кроме того, можно установить расширение NetBeans Connector непосредственно из веб-магазина Chrome, выполнив следующие шаги.

Запустите браузер Chrome и перейдите в веб-магазин Chrome.

Выполните поиск расширения Netbeans Connector в веб-магазине Chrome.

Нажмите кнопку ‘Добавить к Chrome’ на странице результатов поиска и нажмите кнопку ‘Добавить’ при отображении запроса на добавление расширения.

Автономная установка расширения

Если не удается подключиться к веб-магазину Chrome, можно установить расширение NetBeans Connector, который входит в комплект с IDE. Если при запуске проекта NetBeans HTML5 будет предложено установить расширение NetBeans Connector, вы можете выполнить следующие действия, чтобы установить расширение при отсутствии доступа к веб-магазину Chrome.

Щелкните ‘Отсутствует подключение’ в диалоговом окне ‘Установить расширение Chrome’.

Щелкните найти в диалоговом окне, чтобы открыть папку установки IDE NetBeans в локальной системе, содержащей расширение * netbeans-chrome-connector.crx *.

Откройте страницу расширений Chrome ( chrome://extensions/ ) в браузере Chrome.

Перетащите расширение netbeans-chrome-connector.crx на страницу ‘Расширения’ в браузере и нажмите кнопку ‘Добавить’, чтобы подтвердить добавление расширения.

После добавления расширения вы увидите, что расширение NetBeans Connector добавлено в список установленных расширений.

Щелкните Да, подключаемый модуль сейчас установлен в диалоговом окне ‘Установить расширение Chrome’, чтобы открыть проект NetBeans HTML5 в браузере Chrome. Вы увидите значок NetBeans Connector в адресной строке вкладки браузера.

Использование встроенного браузера на базе WebKit

Рекомендуется запускать приложения HTML5 в браузере Chrome с установленным расширением NetBeans Connector при разработке приложений. Параметр Chrome с интеграцией NetBeans выделяется по умолчанию при запуске целевого элемента при создании в приложении HTML5. Тем не менее, также возможен запуск приложений HTML5 во встроенном браузере на базе WebKit, который входит в комплект с IDE.

При запуске приложения HTML5 во встроенном браузере на базе WebKit в IDE открывается окно веб-браузера. Встроенный браузер на базе WebKit поддерживает многие функции, которые включены в браузере Chrome, при условии установки расширения NetBeans Connector, в том числе режим проверки, выбор различных вариантов размера экрана и отладка JavaScript.

Примечание. При выборе ‘Окно’ > ‘Интернет’ > ‘Веб-браузер’ в главном меню IDE открывает браузер, который указан в качестве веб-браузера в окне ‘Параметры’.

Выполните следующие действия, чтобы запустить приложение HTML5 application во встроенном браузере на базе WebKit.

Выберите встроенный браузер на базе WebKit в раскрывающемся списке на панели инструментов.

Нажмите ‘Выполнить’ на панели инструментов или щелкните правой кнопкой мыши узел проекта в окне ‘Проекты’ и выберите ‘Выполнить’.

При запуске приложения окно веб-браузера открывается в IDE.

Можно щелкнуть значки на панели инструментов вкладки веб-браузера, чтобы включить режим проверки и быстро переключаться между различными размерами экрана.

Создание проекта HTML5 NetBeans

Выберите ‘Файл’ > ‘Новый проект’ (Ctrl-Shift-N; ⌘-Shift-N в Mac) в главном меню, чтобы открыть мастер создания проектов.

Выберите категорию HTML5, затем выберите Приложение HTML5. Нажмите кнопку ‘Далее’.

Введите HTML5Demo в качестве имени проекта и укажите каталог на компьютере, где следует сохранить проект. Нажмите кнопку ‘Далее’.

В шаге 3. Шаблон сайта, выберите ‘Без шаблона сайта’. Нажмите кнопку ‘Далее’.

При выборе ‘Без шаблона сайта’ мастер создает базовый пустой проект NetBeans HTML5. Если нажать кнопку ‘Готово’, проект будет содержать только папку корня сайта и файл index.html в папке корня сайта.

Примечание. Вы должны быть подключены к сети, чтобы создать проект, который основан на одном из интернет-шаблонов в списке.

Примечания.

Можно нажать номер версии библиотеки в столбце ‘Версия’, чтобы открыть всплывающее окно, в котором можно выбрать предыдущие версии библиотек. По умолчанию в мастере отображается самая последняя версия.

Для завершения мастера нажмите кнопку Готово.

После нажатия кнопки ‘Готово’ в IDE создается проект, отображается узел проекта в окне ‘Проекты’ и открывается файл index.html в редакторе.

Если развернуть папку js/libs в окне ‘Проекты’, будет видно, что библиотеки JavaScript, которые были указаны в мастере создания проектов, были автоматически добавлены к проекту. Можно удалить библиотеку JavaScript из проекта, щелкнув правой кнопкой мыши файл JavaScript и выбрав ‘Удалить’ во всплывающем меню.

Теперь можно проверить, правильно ли отображается данный проект в браузере Chrome.

Убедитесь, что на панели инструментов браузера в раскрывающимся списке выбран Chrome с NetBeans Integration.

Щелкните правой кнопкой мыши узел проекта в окне «Проекты» и выберите «Выполнить».

При выборе ‘Выполнить в IDE’ открывается вкладка в браузере Chrome и отображается страница index.html по умолчанию для приложения. В среде IDE открывается окно ‘Обзор DOM’, в котором отображается дерево DOM открытой в браузере страницы.

Обратите внимание, что на вкладке браузера имеется желтая полоса, которая является уведомлением о том, NetBeans Connector выполняет отладку вкладки. IDE и браузер связаны и имеют возможность взаимодействовать друг с другом в тех случаях, когда желтая полоса видна. При запуске приложения HTML5 из IDE отладчик JavaScript включается автоматически. После сохранения изменений в файле или внесении изменений в таблицу стилей CSS не нужно перезагружать страницу, потому что окно браузера автоматически обновляется с учетом изменений.

При закрытии желтой полосы или щелчка ‘Отмена’ разрывается соединение между IDE и браузером. В случае разрыва соединения необходимо запустить приложение HTML5 из IDE повторно.

Также следует отметить, что значок NetBeans отображается в местоположении адреса URL поля браузера. Вы можете щелкнуть значок, чтобы открыть меню, которое предоставляет различные варианты для изменения размера изображения в браузере и для включения режима проверки в режиме NetBeans.

Если выбрать одно из заданных по умолчанию устройств в меню, размер окна браузера будет изменяться в соответствии с размерами выбранного устройства. Это позволит увидеть, как приложение будет выглядеть на выбранном устройстве. Приложения HTML5 обычно реагируют на размер экрана устройства, на котором они просматриваются. Можно использовать правила JavaScript и CSS, которые реагируют на размер экрана, а также изменить способ отображения приложения таким образом, чтобы его макет был оптимизирован для устройства.

Редактирование файла HTML

В этом упражнении будут добавлены ресурсы проекта к проекту и будет выполнено редактирование файла index.html для добавления ссылок на ресурсы и некоторых правил CSS. Вы увидите, как несколько простых средств выбора CSS в сочетании с JavaScript могут значительно изменить то, как страница отображается в браузере.

Загрузите архив ресурсы проекта и извлеките содержимое.

Скопируйте папки pix и css в корневую папку сайта.

Откройте в редакторе index.html (если он еще не открыт).

Для решения задач можно использовать функцию автозавершения кода в редакторе.

При сохранении изменений страница автоматически перезагружается в браузере и должна выглядеть примерно так, как показано ниже.

Введите следующие встроенные правила CSS между тегами в файле.

Нажмите сочетание клавиш Ctrl-Space, чтобы использовать функцию автозавершения кода в редакторе при добавлении правил CSS.

Если открыть окно ‘Обзор DOM’, отображается текущая структура страницы.

Страница стилей basecss.css основана на определенных правилах CSS, определенных на страницах стилей CSS, в теме «UI lightness» jQuery.

Можно открыть страницу стилей basecss.css в редакторе и изменить страницу стилей для добавления правил CSS, добавленных в предыдущем шаге, или создать новую страницу стиля для правил CSS.

Добавьте следующий код между тегами для запуска сценария jQuery при загрузке элементов страницы.

Также можно использовать следующую сокращенную версию этой функции.

Команды для jQuery принимают форму метода JavaScript с дополнительным объектным литералом, предоставляющим массив параметров, который должен быть помещен между фигурными скобками <> в функции (document).ready для выполнения только в допустимый момент, то есть после полной загрузки модели DOM.

Примечание. В приведенном выше фрагменте кода также было указано ‘autoHeight: false’. Это препятствует установке элементом оформления accordion высоты каждой панели на основе самой высокой части содержимого в разметке. Дополнительные сведения см. в документации accordion API.

Раздел файла index.html должен выглядеть следующим образом.

Код можно упорядочить, щелкнув правой кнопкой мыши в редакторе и выбрав ‘Формат’.

Как включить и отключить html5 в google chrome

Что делать если Flash Player отсутствует

Если при посещении страниц, видеоролики отказываются
воспроизводиться, то, скорее всего плагин не был установлен. Для загрузки
имеется два варианта:

Чтобы установить флэш-плеер, нужно проделать некоторую
работу. Справиться с ней будет легко, главное не отступать от пошаговой
инструкции.

Запустите яндекс браузер, откройте меню,
выберите «настройки».

На верхней панели откройте дополнения,
пролистайте вниз страницы, кликните по «каталог расширений».

Откроется магазин, где справа в поисковике нужно
ввести «Adobe Flash Player»,
нажать поиск.

Магазин даст ссылку на официальную страницу компании, откуда
можно скачать плагин. Также он предложит пользователю некоторые варианты,
способные заменить адобе, но только для просмотра видео на сайте ютуб.

Для установки плагина понадобиться соединение с интернетом.

Яндекс браузер поддерживает ли html5. Исправляем ошибку HTML5 в видеоплеере. Определение возможностей с помощью Modernizr

Поддержка браузерами HTML5

Стандарт HTML5 поддерживает всевозможные странные методы. В то же самое время он возрождает (и стандартизует) некоторые старые либеральные правила HTML и вводит передовые возможности, которые работают только в новейших браузерах.

Что касается браузерной совместимости, функциональные возможности HTML5 можно разбить на три категории:

Это намного лучше, чем сообщение об ошибке, которое определенно нельзя назвать поэтапной деградацией. В эту категорию также входят второстепенные возможности из разряда примочек, на которые старые браузеры могут спокойно не обращать внимания, наподобие некоторых старых возможностей для работы с веб-формами (например, замещающий текст), и некоторые возможности форматирования из CSS3 (например, для скругления углов или отбрасывания теней).

Создание обходного решения JavaScript может быть очень трудоемкой задачей, поэтому, если вы посчитаете, что определенная возможность является необходимой и требует обходного решения JavaScript, вы можете просто решить использовать это обходное решение для всех страниц и отложить использование методов HTML5 на будущее.

Chrome теперь отдаёт приоритет HTML5-содержимому по умолчанию

Chrome 55 также стал удобнее: в частности, были внесены изменения в JavaScript-движок V8, что, согласно внутренним тестам, в среднем на 50 % снижает потребление памяти. Больше всего изменения станут заметны владельцам устройств с не очень большим объёмом оперативной памяти, включая смартфоны и планшеты. Более того, в программу была добавлена автоматическая расстановка переносов в CSS, благодаря чему тексты в браузере стали более удобочитаемы.

Наконец, теперь Chrome по умолчанию блокирует Flash-контент, отображая вместо него HTML5-содержимое. Если пользователь попадёт на сайт, где нет поддержки HTML5, то программа спросит у него, хочет ли он запустить Flash-контент на сайте. Новые правила не распространяются лишь на самые популярные сайты, среди которых — Facebook, YouTube, Yahoo, Live.com, Twitch, Amazon, Mail.ru, «Одноклассники», «ВКонтакте» и «Яндекс». Впрочем, исключение будет действовать только один год, после чего Flash-контент будет по умолчанию блокироваться на всех сайтах, и разрешение на просмотр такого контента будет запрашиваться у пользователя всегда.

Отметим, что Chrome начал блокировать Flash-содержимое ещё в сентябре, однако тогда это распространялось лишь на контент, загружаемый в фоне.

Способы решения проблемы с загрузкой видео в Яндекс Браузере

Разберем варианты устранения самых частых проблем, из-за которых может тормозить видео в Яндекс.Браузере. Избавиться от этих неполадок сможет каждый пользователь, нужно только следовать инструкциям. Если ничего не получилось после пробы одного способа – переходите к следующему, скорее всего, хоть одно решение поможет избавиться от тормозов.

Способ 1: Обновление браузера

Возможно, вы используете устаревшую версию интернет обозревателя, а в актуальной версии разработчики уже решили проблему, с которой сталкиваетесь вы. Поэтому необходимо установить эту самую новую версию. Чаще всего, уведомления об обновлении приходят сами, но возможно в вашей версии они отключены. Чтобы самостоятельно установить актуальную версию веб-обозревателя, сделайте следующее:

В открывшимся окне вы получите уведомление о том, что используете актуальную версию. Если же она устаревшая, то вам предложат обновиться. Просто следуйте инструкциям, которые увидите в браузере, чтобы перейти на новую версию.

Перезапустите веб-обозреватель, если он не перезапустился сам, и проверьте теперь работу видео.

Способ 2: Освобождение физической памяти компьютера

Если ваш компьютер недостаточно мощен и вы запустили слишком много программ или вкладок в браузере, то это может быть причиной тормозов при просмотре видео, так как оперативная память слишком загружена и компьютер не может выполнять быстро все процессы. Чтобы проверить и, при надобности, исправить это, вам необходимо:

Вызвать его также можно нажатием комбинации клавиш Ctrl+Shift+Esc

Перейдите во вкладку «Процессы» и обратите внимание на загруженность ЦП и физической памяти.

Если процент слишком большой – закройте ненужные программы или прекратите работу ненужных процессов, нажав правой кнопкой мышки по объекту и выбрав «Завершить процесс».

Если вы видите, что запущено мало программ, но все равно физическая память и центральный процессор слишком загружены – почистите компьютер от мусора с помощью CCleaner и проверьте на наличие вирусов с помощью удобного для вас антивируса или в режиме онлайн.

Если причина не в этом, переходите далее.

Способ 3: Очистка кэша в Яндекс.Браузере

Также проблема может быть вызвана засоренностью кэш-памяти обозревателя. Поэтому нужно очистить ее. В Яндекс Браузере это можно сделать следующим образом:

Нажмите «Очистить историю».

Обратите внимание на то, чтобы стояла галочка напротив «Файлы, сохраненные в кэше» и нажмите «Очистить историю».

Способ 4: Уменьшение качества видео

Казалось бы, очевидный способ, который не нужно расписывать, однако, некоторые пользователи все-таки не знают о том, что можно уменьшить качество видео, если у вас слабый интернет. Разберемся как это делается на примере видеохостинга YouTube:

Откройте необходимый ролик, нажмите на шестеренку и выберите необходимое качество ролика.

Если же проблема на других сайтах не наблюдается, а на Ютубе проявляется, возможно, у вас проблема только с этим сервисом. Вам необходимо изучить следующий материал.

Подробнее: Решение проблемы с долгой загрузкой видео на YouTube

Это основные способы решения проблемы с тормозами видео в Яндекс.Браузере

Также стоит обратить внимание на то, что если вы скачиваете какой-нибудь файл, то может не хватать скорости интернета для воспроизведения ролика. Дождитесь окончания загрузки файла или остановите ее на время просмотра видео.

Опишите, что у вас не получилось.
Наши специалисты постараются ответить максимально быстро.

Почему появился HTML5

При отсутствии HTML5 для браузера Яндекс для воспроизведения видео и части музыки приходилось пользоваться Flash Player. Получалась ситуация, при которой стандартными средствами браузера невозможно было прослушать музыку. Наибольший приток пользователей к Flash был спровоцирован появлением крупнейшего видеохостинга YouTube. Со временем другие крупные компании, например, Apple, стали использовать его для обработки видео.

Прирост пользователей продолжался долгое время, сразу после выхода HTML 4.01 наблюдался большой скачок популярности. Отток произошёл лишь после выпуска новой спецификации HTML5, которая впервые появилась в 2012 году, но полноценный запуск произошёл в 2014 году.

К переходу на HTML5 видео проигрыватель подталкивает несколько основных недостатков плагина от Adobe:

Проигрыватели на JavaScript

Если вы не хотите ни от кого зависеть в своей работе, то можете создать свой аудио- или видеопроигрыватель с чистого листа. Но это будет очень трудоемким проектом, особенно если вы хотите обеспечить разные вычурные возможности, наподобие интерактивного списка воспроизведения. К тому же, если за вашей спиной нет небольшого дизайнерского отдела, то существует отчетливая вероятность, что конечный продукт ваших усилий будет иметь слегка уродливый внешний вид (как показано выше ;).

К счастью, для веб-дизайнеров, блуждающих в поисках идеального HTML5-проигрывателя, имеется лучший вариант. Вместо того чтобы разрабатывать мультимедийный проигрыватель самому, можно взять бесплатный, настраиваемый посредством JavaScript проигрыватель в Интернете. Два из них — это VideoJS и, для фанатов библиотеки jQuery — jPlayer. Оба проигрывателя легковесные, удобны в использовании, а также имеют функцию смены скинов с помощью таблицы стилей. Например сервис VideoJS позволяет создать вручную скин медиаплеера:

Большинство проигрывателей мультимедиа на JavaScript (включая проигрыватели VideoJS и jPlayer) содержат встроенные резервные решения Flash, что позволяет разработчику сэкономить время и усилия на поиски отдельного Flash-проигрывателя. А проигрыватель jPlayer имеет удобную функцию создания списка воспроизведения, позволяющего выбрать для проигрывания или просмотра несколько файлов.

Чтобы использовать VideoJS в своих разработках, сначала загрузите его JavaScript-файлы с веб-сайта проигрывателя. Потом вставьте ссылку на его сценарий и таблицы стилей, как показано в следующем коде:

Затем используется обычный элемент с несколькими элементами и резервным решением Flash. (Для резервного Flash-решения в проигрывателе VideoJS используется Flowplayer, но его можно удалить и использовать другой Flash-проигрыватель.) По сути, единственная разница между обычной страницей HTML5 и страницей с проигрывателем VideoJS состоит в том, что в последней нужно использовать специальный класс в элементе :

Видеоформаты

можно представить как ZIP-файл, содержащий закодированный видео- и аудиопоток. В Интернете актуальны форматы WEBM, MP4 и OGV:

Видеотег развивается удивительно быстро. Всего год назад он поддерживался только браузером Safari и только в стабильной версии. Теперь видео HTML5 поддерживают все современные браузеры, включая IE9. Что касается кодеков, разработчики Firefox, Chrome и Opera договорились включить поддержку WEBM в качестве общего видеоформата, используя проект WebM. Internet Explorer также будет его поддерживать, если кодек установлен на компьютере (мы надеемся, что в будущем это требование будет отменено).

Примечание. На момент составления руководства браузер Safari не поддерживал формат WEBM.

В этом примере видно, что браузер может воспроизвести один или два из трех указанных нами форматов (если отображаются все три, считайте, что вам повезло):

На момент составления руководства (август 2010 г.) наиболее безопасная комбинация форматов, гарантирующая воспроизведение видео в любом браузере, выглядела примерно так, как в этом фрагменте:

Примечание. Если вам нужно, чтобы видео загружалось в iPad, в качестве первого варианта необходимо указать формат MP4. Это связано с ошибкой в устройстве, и этот момент нужно учитывать, пока неполадка не будет устранена.

Как я уже говорил, почти все разработчики браузеров договорились поддерживать общий видеоформат. Таким образом, менее чем через год в сети, скорее всего, будет использоваться следующий код:

Несмотря на то что корпорация Майкрософт объявила о поддержке видеотега и других элементов HTML5 в браузере IE9, скорость перехода ее пользователей на новые версии ниже, чем у других основных браузеров. Об этом мы поговорим в следующем разделе.

Запрещаем автовоспроизведение мультимедиа

Хорошо, если используете браузер Chrome, последняя версия которого не только отмечает вкладки, где играет ролик, но и позволяет отключить автоматический запуск его воспроизведения.

Отключение автоматического проигрывания мультимедиаконтента в браузере осуществляется парой кликов.

Нажмите на кнопку «Настройки контента»

Жмем кнопку «Готово», расположенную внизу страницы.

После применения изменений браузер начнет запрашивать вашего разрешения на запуск проигрывания видеоконтента.

Firefox

Автовоспроизведение flash-видео в Firefox запрещается аналогичным образом – настраиваем запуск плагина для визуализации флеш-роликов с разрешения пользователя.

Если флеш-содержимое ни одного сайта вас не интересует, рекомендуется выключить плагин в мозиле, отвечающий за его воспроизведение. В таком случае в выпадающем списке кликаем по «Никогда не включать».

Отключить в firefox html5 немного сложнее.

Пишем «about:config» в его адресной строке.

Изменяем значение всех строчек типа: «media.*.enabled», где * — это форматы файлов, на «false».

Opera

Аналогичной является процедура отключение автоматического воспроизведения flash содержимого и в норвежской Опере.

Яндекс браузер

Далеко не каждый пользователь способен самостоятельно отключить флеш плеер в яндекс браузере.

Да и информации по этой теме на просторах рунета совсем немного. Следуйте пунктам предложенной инструкции и за несколько секунд избавитесь от назойливого автоматического проигрывания видеоконтента, созданного с использованием технологии flash на всех без исключения сайтах. Полностью блокировать его не рекомендуется, а вот проигрывание из разрешения пользователя включить стоит.

Выключить flash player в яндекс браузере можно следующим образом:

Выключаем автозапуск html5

Отключить html5 сложнее, чем flash-содержимое сайтов. Этот новый движок используется для воспроизведения всего видеоконтента на популярном сервисе Youtube. В настройках браузеров отключить youtube html5 невозможно, потому придется прибегнуть к специальным расширениям, разработанным для решения этой задачи. Рассмотрим на примере Magic Actions, так как оно существует в двух редакциях: для Гугл Хром и для ФайрФокс.

Добавление плагина происходит через магазин расширений вашего браузера, на этом останавливаться не станем.

Настраиваем Flash Player в Яндекс.Браузере

Плагин Флеш Плеер уже встроен в веб-обозреватель от Яндекса, а значит, у вас нет необходимости в его отдельной загрузке – вы сразу можете перейти к его настройке.

В открывшемся окне вам потребуется спуститься к самому концу страницы и щелкнуть по кнопке «Показать дополнительные настройки».

В показавшихся дополнительных пунктах отыщите блок «Личные данные», где вам следует кликнуть по кнопке «Настройки содержимого».

На экране появится новое окно, в котором следует найти блок «Flash». Именно здесь и производится настройка плагина Flash Player. В данном блок вам доступны три пункта:

Какой бы вы пункт ни выбрали, вам доступна возможность составления личного списка исключений, где сможете самостоятельно установить действие работы Flash Player для определенного сайта.

Например, в целях безопасности вы хотите отключить работу Flash Player, но, например, предпочитаете слушать музыку в социальной сети ВКонтакте, для воспроизведения которой и требуется небезызвестный проигрыватель. В этом случае вам потребуется кликнуть по кнопке «Управление исключениями».

На экране отобразится уже готовый список исключений, составленный разработчиками Яндекс.Браузера. Чтобы внести свой собственный сайт и назначить для него действие, выделите любой имеющийся веб-ресурс одним кликом мыши, а затем пропишите URL-адрес интересующего вас сайта (в нашем примере это vk.com)

Указав сайт, вам остается лишь назначить для него действие – для этого справа щелкните по кнопке, чтобы отобразить всплывающий список. Вам точно так же доступны три действия: разрешить, находить контент и блокировать. В нашем примере мы отмечаем параметр «Разрешить», после сохраняем изменения нажатием по кнопке «Готово» и закрываем окно.

На сегодняшний день это все варианты настройки плагина Flash Player в браузере от Яндекс. Не исключено, что вскоре и эта возможность пропадет, поскольку все разработчики популярных веб-обозревателей уже давно планируют отказаться от поддержки данной технологии в пользу укрепления безопасности браузера.

Опишите, что у вас не получилось.
Наши специалисты постараются ответить максимально быстро.

Заключение

Итак, мы создали нашу Web-страницу. На этом завершается первая статья в данной серии из четырех частей. Цель этой статьи состояла в том, чтобы представить новый режим работы HTML5. HTML5 — это не просто модернизация HTML4, — это новый способ цифрового коммуницирования. Благодаря функциональности технологий CSS3 и JavaScript, спецификация HTML5 вплотную приблизилась к тому, чтобы предоставить разработчику все возможности в одном пакете. Если вы усвоите все необходимое из обширного массива имеющейся в открытом доступе информации по HTML5, то сможете присоединиться к растущему сообществу Web-дизайнеров и Web-разработчиков, компетентных в мультимедийных аспектах HTML5. В следующей части данной серии мы рассмотрим, как писать код для HTML5-форм и как структурировать эти формы.

Похожие темы

Заключение

Пришло время подвести итоги. В данном материале мы рассматривали вопрос о том, как в браузере Mozilla Firefox отключить принудительное воспроизведение видео через плеер HTML5. Оказывается, что это не так сложено.

Просто нужно найти в скрытых настройках соответствующие параметры. Кстати, если в дальнейшем вы захотите все вернуть на круги своя, то достаточно будет сменить «false» на «true» при помощи все той же инструкции.

Если сравнить существующий сегодня YouTube с тем, который был еще 5-7 лет назад, то это совершенно два разных понятия……

Сотни терабайт эксклюзивного контента, постоянно растущая аудитория и новые функции – поменялось многое, но об о всем по порядку…………………….

→ Еще в преддверие 2017 года руководство YouTube анонсировало новый проигрыватель HTML5.

Не удивительно, что у новой функции появились сторонники и противники, поэтому ниже мы расскажем о технологии html5 на YouTube, а также как ее отключить ↓↓↓

Источники информации:

• http://metanit.com/web/html5/1.1.php
• http://programka.net/player/skachat-html5
• http://skillbox.ru/media/code/sozdaem_sayt_na_html/
• http://code.tutsplus.com/ru/tutorials/what-is-html5—cms-25803
• http://docs.microsoft.com/ru-ru/archive/msdn-magazine/2011/august/html5-building-apps-with-html5-what-you-need-to-know
• http://www.computerra.ru/183479/zachem-nam-nuzhen-html5-pyat-prostyih-otvetov/
• http://www.oszone.net/16340/HTML5
• http://netbeans.apache.org/kb/docs/webclient/html5-gettingstarted_ru.html
• http://browsermania.ru/html5-pleer.html