С каждым днем поисковые машины обрабатывают тысячи запросов с просьбами исправить ошибку HTML5 при просмотре видео. И не удивительно, ведь данная технология относительно новая и распространяется высокими темпами. Как решить эту проблему мы расскажем ниже.
Для многих не секрет, что для просмотра разного рода видеороликов, игры в онлайн-приложения и совершения прочих полезных действий нужны специальные расширения для браузера. Среди них Adobe Flashplayer, Microsoft Silverlight, Ace Stream и Quicktime. Доля веб-элементов, поддерживающих вышеприведенные технологии, превышает 90%.
Но это было до недавнего времени. После презентации нового стандарта HTML5 появилась возможность проигрывать видеоролики и прочий медиаконтент средствами браузера, без участия сторонних плагинов и дополнительных кодеков. Плеер поддерживает все современные расширения файлов, среди которых OGG, WebM, MP4 и прочие.
Если новинка столь хороша, почему возникают проблемы? На этот и сопутствующие вопросы ответ расположен ниже.
В подавляющем большинстве случаев проблема заключается в устаревшей версии браузера, который не поддерживает стандарт HTML5. Для обновления вашего интернет-обозревателя перейдите в «Параметры» – «О программе» и нажмите кнопку «Проверить наличие обновлений».
Если приложение сообщает, что вы используете последнюю версию, но при этом дата предыдущего обновления указана более чем полугодичной давности – удалите браузер вручную и скачайте новый с официального сайта.
Но обновления приложения может не хватить. В качестве альтернативных действий выполните следующее:
На этом все. Теперь вы знаете, как исправить ошибку HTML5 при просмотре видео. Если знаете другие способы решения проблемы – поделитесь им, пожалуйста, в комментариях.
Последнее обновление: 08.04.2016
HTML (HyperText Markup Language) представляет язык разметки гипертекста, используемый преимущественно для создания документов в сети интернет. HTML начал свой путь в начале 90-х годов как примитивный язык для создания веб-страниц, и в настоящий момент уже трудно представить себе интернет без HTML. Подавляющее большинство сайтов так или иначе используют HTML.
В 2014 году официально была завершена работа над новым стандартом - HTML5, который фактически произвел революцию, привнеся в HTML много нового.
Что именно привнес HTML5?
HTML5 определяет новый алгоритм парсинга для создания структуры DOM
добавление новых элементов и тегов, как например, элементы video , audio и ряд других
переопределение правил и семантики уже существовавших элементов 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? Этим занимается World Wide Web Consortium (сокращенно W3C - Консорциум Всемирной Паутины) - независимая международная организация, которая определяет стандарт HTML5 в виде спецификаций. Текущую полную спецификацию на английском языке можно посмотреть по адресу https://www.w3.org/TR/html5/ . И надо отметить, что организация продолжает работать над HTML5, выпуская обновления к спецификации.
Надо отметить, что между спецификацией HTML5 и использованием этой технологии в веб-браузерах всегда был разрыв. Большинство браузеров стало внедрять стандарты HTML5 еще до их официальной публикации. И к текущему моменту большинство последних версий браузеров поддерживают большинство функциональностей HTML5 (Google Chrome, Firefox, Opera, Internet Explorer 11, Microsoft Edge). В то же время многие старые браузеры, как например, Internet Explorer 8 и более младшие версии, не поддерживают стандарты, а IE 9, 10 поддерживает лишь частично.
При этом даже те браузеры, которые в целом поддерживают стандарты, могут не поддерживать какие-то отдельные функции. И это тоже надо учитывать в работе. Но в целом с поддержкой данной технологии довольно хорошая ситуация.
Для проверки поддержки HTML5 конкретным браузером можно использовать специальный сервис http://html5test.com .
Что потребуется для работы с HTML5? В первую очередь, текстовый редактор, чтобы набирать текст веб-страниц на html. На данный момент наиболее популярным и продвинутым текстовым редактором является Notepad++ , который можно найти по адресу http://notepad-plus-plus.org/ . К его преимуществам можно отнести бесплатность, подсветка тегов html. В дальнейшем я буду ориентироваться именно на этот текстовый редактор.
Также стоит упомянуть кроссплатформенный текстовый редактор Visual Studio Code . Данный редактор обладает несколько большими возможностями, чем Notepad++, и кроме того, может работать не только в ОС Windows, но и в MacOS и в операционных системах на основе Linux.
И также потребуется веб-браузер для запуска и проверки написанных веб-страничек. В качестве веб-браузера можно взять последнюю версию любого из распространенных браузеров - Google Chrome, Mozilla Firefox, Microsoft Edge, Opera.
Adobe Flash Player доживает свои последние годы. Данная платформа морально устарела, и разработчики перестанут поддерживать её уже к 2020 году. Многие компании, программисты и энтузиасты уже начали отказываться от проверенного формата в пользу прогрессивных, но ещё «сырых» технологий. Одним из таких новшеств является видеоплейер «HTML5», который, потенциально может заменить старый добрый Флэш Плеер.
Не все пользователи могут похвастаться мощными и современными персональными компьютерами со всеми обновлениями операционной системы (драйвера, кодеки). Не у всех установлена (чем выше версия, тем меньше ошибок при работе). Но всем интересна жизнь, кипящая в глобальной сети Интернет. Тысячи фильмов и сериалов, десятки тысяч клипов, сотни тысяч забавных любительских видеороликов можно найти и посмотреть через всемирную паутину в любой точке планеты Земля.
Если при просмотре видео на компьютере возникают графические искажения, пользователю не стоит расстраиваться и искать альтернативу для просмотра. Первое что надо сделать – это проверить работоспособность своего ПК, все ли обновления, драйвера и кодеки есть и в рабочем состоянии. Второй нюанс – это проверка видеоплейера, встроенного в сам интернет обозреватель Мозила. Разработчики из Mozilla Corporation стараются угодить всем своим фанатам и просто пользователям поисковой системы. Поэтому у каждого есть возможность просмотра видеоизображений через различные плееры: Flash Player или HTML5. Чтобы проверить, какой плеер включён в браузере фаерфокс, достаточно нажать правой кнопкой мыши по экрану с видеорядом.
Если пользовательский персональный компьютер уступает по техническим характеристикам своим современным собратьям, можно попробовать сменить плеер с HTML5 на Adobe Flash Player. Для этого необходимо зайти в скрытые настройки браузера, набрав в поисковой строке «about:config ». Разработчики любезно предупреждают о рисках, связанных с изменениями в «тонких» настройках. Принимаем ответственность на себя.
В окне «Поиск:», для простоты нахождения для изменения параметров, надо набрать английское слово «media».
Четыре параметра, которые могут быть включены по-молчанию, надо сменить с «true» на «false». То есть выключить их двойным щелчком левой кнопкой мыши.
После перезагрузки браузера Mozilla Firefox настройки вступят в силу, и новый плеер HTML5 сменится на Adobe Flash Player.
Если необходимо провести обратную манипуляцию и сменить старый проигрыватель от Adobe на прогрессивный аналог, пользователю нужно провести те же манипуляции с вышеупомянутыми параметрами с «false» на «true». Перезапустив интернет обозреватель, видео должно показывать без помех и сбоев.
Наверняка, после всего сказанного, у вас появится вопрос «как мне узнать поддерживает ли мой браузер новую версию HTML ?» Это хороший вопрос, требующий скорейшего ответа. Ведь прежде чем тестировать новые возможности, рассматривать новые теги, в первую очередь необходимо узнать, возможно ли это вообще. Например, в HTML 5 существует поддержка видео или графики. Однако нет смысла пробовать внедрить в страничку видео, если оно не поддерживается программно.
К счастью, в Интернете есть хороший ресурс – HTML 5 test . com , который поможет вам в этой ситуации. Он проанализирует данные о вашем браузере и расскажет, какие новые теги версии HTML 5 браузер поддерживает, а какие нет. Также здесь можно посмотреть краткую информацию и о других браузерах, сравнить данные и сделать соответствующие выводы.
К примеру, при тестировании браузера Mozilla Firefox 8.0 для ОС Ubuntu C anonical 1.0 через сайт www.HTML 5 test . com суммарное количество баллов составило 330 (+ 9 бонусных очков) из 475 (табл. 8.1).
Это не так много по сравнению с браузером Google Chrome 16.0, у которого 373 очка (+15 бонусных очков). Но достаточно много по сравнению с браузером Microsoft Internet Explorer 9, у которого всего 141 очко (+ 5 бонусных очков) (табл. 8.2).
В табл. 8.1. приводятся примеры тех нововведений, в которых есть недочеты. Те технологии, которые приведены на английском языке, находятся в разработке или разработаны W 3C . На сайте-анализаторе также есть ссылки на соответствующие страницы. Все остальные моменты, введенные в версии HTML 5, полностью поддерживаются указанным выше браузером.
Таблица 8.1
Данные по браузеру Mozilla Firefox 8.0
Нововведение |
Количество баллов/из (+ бонус) |
Что есть |
Чего нет |
Видео |
21/31 (+4) |
Видеоэлемент с поддержкой ogg и Вебm |
Нет поддержки mpeg-4, h.264 |
Аудио |
20 (+3) |
Аудиоэлемент с поддержкой ogg, pcm и Вебm |
Нет поддержки mp3, aac |
Элементы формы |
56/100 |
Для элемента input есть новые типы search, tel, url, email. Новыеэлементыfieldset, datalist, output |
Нетподдержкитиповinput datetime, date, month, week, time, color. Не поддерживаются элементы progress и meter |
Общение |
34/36 |
Cross-document messaging |
Server-Sent Events |
Взаимодействие с файлами |
10/20 |
Поддржка FileReader API (чтение) |
Нет поддержки FileWriter API (запись) |
Хранение данных |
Поддержка сессий и локального хранения |
Нет поддержки связи с sql базами данных |
|
Workers |
10/15 |
Веб Workers |
Shared Workers |
Уведомления |
0/10 |
Не поддерживается полностью |
|
Microdate |
0/15 |
Не поддерживается полностью |
|
Доступ к камере |
0/20 |
Не поддерживается полностью |
|
Элементы защиты |
0/10 |
Не поддерживаются полностью |
Таблица 8.2
Даные по браузерам
Браузер |
Версия |
Баллы (+ бонус) |
Google Chrome |
16.0 |
373 (15) |
Mozilla Firefox |
330 (9) |
|
Opera |
11.60 |
329 (9) |
Apple Safari |
302 (7) |
|
Microsoft IE |
141 (5) |
В табл. 8.2 приведены данные для браузеров персональных компьютеров. Но, не стоит забывать и о планшетах, и о браузерах в мобильных телефонах, и о старых браузерах, которые также могут использоваться людьми. Данные о них также приведены на указанном выше сайте.
Так или иначе, настоящий веб-разработчик никогда не будет писать программу под какой-то конкретный браузер, понимая, что в других его детище работать не будет. Если, конечно, иное не указано в техническом задании, и если хочется, чтобы работа была видна всем.
Поэтому, если вы решили сделать нечто потрясающее, обязательно ответьте на вопрос «в каких браузерах это будет работать?» и только потом, взвесив все за и против, приступайте к работе .
Теперь, когда вы осознали важность проверки вашего браузера на совместимость с новым стандартом HTML 5, рассмотрим несколько новых возможностей, а именно – взаимодействие с видео- и аудиоинформацией.
Многие из вас знают, что стремительными темпами интернет наполняется сайтами, блогами и прочими ресурсам, созданными на основе HTML5, даже несмотря на то, что сам HTML5 еще находится на стадии разработки, пока еще не утверждена спецификация и неизвестно точно, когда это произойдет. Ну а раз так обстоят дела, то не мешало бы знать, насколько хорошо или плохо на данный момент осуществляется поддержка HTML5 наиболее распространенными и популярными браузерами.
Исходя из того, что наиболее популярными или просто часто используемыми браузерами на данный момент являются Internet Explorer, Google Chrome, Mozlilla Firefox, Opera, Safari и еще... Maxthon, давайте проведем оценку уровня поддержки HTML5
этими популярными браузерами. Для оценки и выставления рейтинга будем использовать самый простой, удобный и бесплатный сервис The HTML5 test. Этот сервис выставляет оценку поддержки браузерами HTML5 в баллах и бонусных очках. Максимальное количество баллов 500, а бонусных очков 15. В будущем, если будет добавлено много новых тестов, то эти значения могут быть увеличены. На заметку: бонусные очки начисляются за поддержку аудио и видео элементов, а так же за поддержку SVG и MathML, и бонусные очки не суммируются с общими баллами.
Ну что же, давайте приступим к обзору. Браузеры будут располагаться в рейтинге по убыванию.
Первое место, как бы ни было странно для некоторых, получает... да, кросс-платформенный браузер Maxthon (версия 4.0.6)!
Он получает 476 баллов и максимальное количество бонусных очков 15!
Бонусные очки Maxthon получил за: парсинг SVG и MathML (+2), поддержку видео-кодеков (+8) и аудио-кодеков (+5).
Если Вы до сих пор не знакомы с браузером Maxthon, то самое время его опробовать. Он работает под Windows, Android, Mac, iPhone и iPad, есть отлично русифицированный интерфейс, как самого браузера Maxthron, так и его сайта). Вы точно не пожалеете, если даже этот браузер не будет вашим основным, и больше зауважаете китайцев, его создателей:)
Второе место с очень маленьким отставанием от лидера получает Google Chrome (версия 27.0)!
Он получает 463 балла и 13 бонусных очков.
Бонусные очки Google Chrome получил за: парсинг SVG и MathML (+2), поддержку видео-кодеков (+6) и аудио-кодеков (+5).
В отличие от Maxthon, он поддерживает субтитры, но не поддерживает атрибуты микроразметки в тегах (Microdata).
На третьем месте шведский браузер, любимый многими из постсоветского пространства, Opera (версия 12.15).
Он получает 404 балла и 9 бонусных очков.
Бонусные очки начислены для Opera за: парсинг SVG и MathML (+2), поддержку видео-кодеков (+4) и аудио-кодеков (+3).
В отличие от Google Chrome и Maxthon например, Opera не поддерживает формат аудио MP3.
Четвертое место занимает Mozilla Firefox (версия 21.0). Жаль, что он пока отстает, пусть всего даже на каких-то 5 баллов, от Opera, ведь это мой основной браузер, с которым я работаю и отдыхаю. Хотя по бонусным очкам он компенсирует свое отставание.
Он получает 399 баллов и 14 бонусных очков.
Бонусные очки засчитаны Mozilla Firefox за: парсинг SVG и MathML (+2), поддержку видео-кодеков (+6) и аудио-кодеков (+6).
Как и Opera он к сожалению пока не поддерживает популярный формат аудио MP3.
На пятом месте, с большущим отставанием от топов, Internet Explorer (версия 10.0). Для меня например это и не странно, даже наоборот, более странно, что он не на последнем:)
Он получает 320 баллов и 6 бонусных очков.
Для IE 10 бонусные очки начислены за: парсинг SVG и MathML (+2) и слабенькую, но все же хоть какую-то поддержку видео-кодеков (+2) и аудио-кодеков (+2).
На последнем шестом месте в нашем обзоре, с большущим отставанием от топов, и даже от IE 10, расположился Safari (версия 5.1.7). У меня пока не было под рукой ничего МАС-осовского, поэтому проверял только самую последнюю версию Safari под Windows.
Он получает 278 баллов и 2 бонусных очка.
Бонусные очки начислены только за парсинг SVG и MathML (+2).
Для видео и аудио у Safari вообще нет поддержки (по крайней мере для этой, самой последней Windows версии). На пару с IE10 этот Safari вообще не поддерживает доступ к веб-камере (Access the webcam), а вот ТОП-4 браузеров в этом обзоре оказывают такую поддержку.
Вот такой вот получается рейтинг поддержки HTML5 среди часто используемых или наиболее популярных браузеров. В ближайшее время может конечно же что-то измениться. Периодически усовершенствуются браузеры и выходят их новые версии. Правда ИМХО надеяться на IE и Safari, глядя на их никчемные на данное время «потуги», не стоит. Да и зачем, ведь в ТОП-4 отличные и бесплатные кросс-платформенные браузеры. Правда обидно наверное поклонникам Opera, что под Windows она уже свой движок практически прекратила развивать.
На сайте html5test.com (автор: Niels Leenheer) Вы можете в любое время протестировать практически любой браузер (причем разных версий), пусть даже «самописный», на предмет его поддержки HTML5. Там же Вы увидите более детальные отчеты и таблицы с оценками тех браузеров, которых у Вас нет, или тех версий, которые уже устарели или не поддерживаются вашей операционной системой (в большей степени это касается IE, который как клещ вцепился в Windows, и которого без обновлений самой системы видимо не получается «раскручивать»).
Приветствуются отзывы в комментариях о браузерах, представленных в данном рейтинге!