Введение в HTML5. Исправляем ошибку HTML5 в видеоплеере
Это — не статья для супер-гуру-вебмастеров. И даже не для начинающих веб-разработчиков. Эта статья задумывалась как памятка об HTML5 для журналистов и аналитиков.
Здесь найдут ответы на свои насущные вопросы журналисты, копирайтеры и другие неспециалисты в области веб-дизайна, которым для работы просто необходимо знать принципы HTML5, но нет возможности вникать в технические подробности использования этого замечательного языка.
Также важно не забывать, что так называемые "демо-HTML» с самим HTML5 не имеют ровным счетом ничего общего. Например, во многом из Google Doodles используется DHTML — технология HTML 4 начала 2000х.
Зачем придумали HTML5?
HTML4 трещал по швам под напором новых видов приложений. Многие вещи были просто недоступны и требовали плагинов типа Adobe Flash или Microsoft Silverlight. Приходилось идти на всяческие уловки и ухищрения, использовать нестандартные, недокументированные приемы, что было не очень-то надежной основой для сайтов, созданных для заработка.
Как много браузеров поддерживают HTML5?
Смотря как посмотреть. Если исходить из того, что HTML5 произошел от HTML4, то все барузеры поддерживают какие-то свойства HTML5.
А с другой стороны, если вы хотите знать, какие браузеры содержат все свойства ядра HTML5 — то ни один. Они все обеспечивают выполнение некоторых частей спецификации (которая насчитывает более 700 страниц), но ни один не поддерживает все одновременно.
Если отбросить все несущественное, то все современные барузеры примерно в равной степени поддерживают HTML5, хоть они и добавляют поддержку тех или иных свойств в разное время.
Кто является движущей силой HTML5?
Началось все в 2004 году, в Opera, под руководством Яна Хиксона. Постепенно присоединились и другие браузеры. Хиксон ушел из Оперы в Google, где продолжает работать над спецификацией.
Будет справедливо сказать, что производители браузеров совместно координируют работу над спецификацией, равно как и W3C и многие другие организации и частные лица. Говоря обобщенно, процессом руководят потребности веб-разработчиков.
Кто пользуется HTML5?
Множество людей и компаний: Boston Globe Newspaper ; Nationwide Building Society , Yell.com и сотни других. На HTML5gallery.com собрано множество сайтов, применяющих HTML5-технологии.
Когда будет завершена работа над HTML5?
Возможно, в 2012 году. А может и в 2022. Это не так важно, важно другое: он сегодня уже поддерживается браузерами, а, следовательно, мы можем использовать его уже сегодня.
Сказать, что мы не можем пользоваться HTML5, потому что его развитие не завершено — это все равно, что сказать, что мы не можем говорить на русском языке, потому что он все еще развивается.
Правда ли, что HTML5 несовместим с Internet Explorer?
Абсолютная ерунда. IE9 хорошо поддерживает HTML5. В более старые браузеры можно добавить поддержку некоторых API с помощью JavaScript -технологии polyfilling, а также плагинов Flash и Silverlight. Элемент canvas может работать некорректно в версиях IE ниже 9. В основном, причиной проблем в старых браузерах является медленный движок JavaScript. Для отображения видео в старых браузерах можно использовать резервный Flash-вариант.
Стоит отметить, что многие возможности HTML5, такие, как атрибут contenteditable, позволяющий пользователю редактировать содержимое объекта, были придуманы Microsoft и включены уже в IE5.
Правда ли, что HTML5 предназначен для мобильных устройств?
Совершенно нет. В основе HTML5 лежат определенные принципы разработки , один из которых гласит о повсеместном его применении:
«Элементы должны разрабатываться для повсеместного использования... Элементы, по возможности, должны работать независимо от платформы, устройства и носителя.»
С другой стороны, есть особенности HTML5, которые особенно полезны в свете использования мобильных устройств. Если рассматривать «настоящий» HTML5, очень полезной окажется, к примеру, возможность продолжать работать с сайтом в оффлайне с помощью технологии Application Cache (“Appcache”).
Также преимуществом является возможность использовать элемент canvas для отображения анимации устройствами, которые по той или иной причине не могут использовать Flash.
Если рассматривать HTML5 в значении «новые супер-веб-технологии», то огромным плюсом является геолокация.
Вытеснит ли HTML5 Adobe Flash?
Нет — по крайней мере, я на это надеюсь. Многие годы Flash оставался единственной возможностью внедрить видео на страницу. Теперь, с появлением HTML5, появилось соперничество, в котором будут развиваться обе технологии, что просто замечательно для разработчиков.
Apple приняли решение не включать поддержку Flash своими iOS устройствами, что дает огромный толчок видео HTML5. Однако, стоит заметить, что iOS — не самая лучшая платформа и для HTML5.
Flash в любом случае остается полезным кросс-браузерным инструментом. к тому же, следует понимать, что Flash — это больше, чем просто видео. Некоторые простые его функции, используемые в играх, перехвачены HTML5 canvas, а часть примитивных анимаций, для которых он ранее использовался, перекочевала в CSS3. Однако, из соображений удобства создателей тонкой анимации, используемой в играх и мультфильмах, конечно, лучше пользоваться Flash , в котором куда более удобный интерфейс, упрощающий разработчикам многие рабочие моменты. Со временем, когда будут разработаны удобные оболочки для работы с canvas это изменится, но еще не сегодня и не завтра.
Комментарии
- емеля
4 октября 2011 в 22:29html1 *THUMBS UP*
Olga Ответ:
октября 5, 2011 at 11:26 дпWdtime.ru Ответ:
февраля 20, 2016 at 10:32 ппПолный список структурных тегов HTML 5 — wdtime.ru/blog/strukturnye-tegi-html-5
- маргарита
5 октября 2011 в 14:01емеля — дурачок, вы что, сказки не читали? :-D
- Бублик
25 ноября 2011 в 14:47жаль что некоторые пользователи немогут понять что есть браузеры лучше internet explorera:(
Olga Ответ:
ноября 25, 2011 at 4:03 ппмежду прочим, ie очень неплохо в последнее время продвинулся в вопросах поддержки новых спецификаций. Видать, схватились за голову после того, как у пользователей винды появился выбор браузера:-D
Бублик Ответ:
ноября 25, 2011 at 4:11 пп
С каждым днем поисковые машины обрабатывают тысячи запросов с просьбами исправить ошибку HTML5 при просмотре видео. И не удивительно, ведь данная технология относительно новая и распространяется высокими темпами. Как решить эту проблему мы расскажем ниже.
Описание плеера
Для многих не секрет, что для просмотра разного рода видеороликов, игры в онлайн-приложения и совершения прочих полезных действий нужны специальные расширения для браузера. Среди них Adobe Flashplayer, Microsoft Silverlight, Ace Stream и Quicktime. Доля веб-элементов, поддерживающих вышеприведенные технологии, превышает 90%.
Но это было до недавнего времени. После презентации нового стандарта HTML5 появилась возможность проигрывать видеоролики и прочий медиаконтент средствами браузера, без участия сторонних плагинов и дополнительных кодеков. Плеер поддерживает все современные расширения файлов, среди которых OGG, WebM, MP4 и прочие.
Если новинка столь хороша, почему возникают проблемы? На этот и сопутствующие вопросы ответ расположен ниже.
Как исправить ошибку?
В подавляющем большинстве случаев проблема заключается в устаревшей версии браузера, который не поддерживает стандарт HTML5. Для обновления вашего интернет-обозревателя перейдите в «Параметры» – «О программе» и нажмите кнопку «Проверить наличие обновлений».
Если приложение сообщает, что вы используете последнюю версию, но при этом дата предыдущего обновления указана более чем полугодичной давности – удалите браузер вручную и скачайте новый с официального сайта.
Но обновления приложения может не хватить. В качестве альтернативных действий выполните следующее:
На этом все. Теперь вы знаете, как исправить ошибку HTML5 при просмотре видео. Если знаете другие способы решения проблемы – поделитесь им, пожалуйста, в комментариях.
30.04.2015 | 20:49 Аналитика
Chrome и Opera лидируют по соответствию с последними веб-функциями, но различий между браузерами меньше, чем кажется на первый взгляд.
Прошло уже четыре года с момента появления HTML5. Сегодня об HTML5 снова вспомнили, потому что комитет W3C, наконец, решил, что пора прекратить возиться со спецификацией HTML 5.0 и перейти к HTML 5.1. Это знаменует собой историческое событие, потому что документ HTML4 был завершен в 1997 году.
Что же делал мир во время становления стандарта? Конечно, не дожидался окончательного проекта. Сайты, использующие преимущества стандарта HTML5, распространились повсеместно. Браузеры поддерживают многие из функций HTML5, и они становятся все лучше с каждой новой версией. Различий между веб-сайтами и нативными приложениями меньше, чем когда-либо, а сложные, интерактивные веб-сайты, ведущие себя как нативные приложения, реальнее, чем когда-либо.
Хорошей новостью является то, что браузеры сошлись на стандарте. По оценке HTML5Test.com, они ближе и ближе к идеальным, хотя разница между некоторыми браузерами все-таки есть.
Стоит отметить, что HTML5Test оценивает соответствие всем стандартам одной цифрой (от 0 до 555). Автоматизированный тест проверяет — поддерживается ли функция, создавая объекты DOM. Он не может сказать, будет ли функция реализована правильно, элегантно, или без ужасных багов.
В то время как эту цифру трудно игнорировать, реальные ответы лежат несколько глубже. Потратив всего несколько минут на просмотр списков, можно увидеть приоритеты развития команды каждого браузера. Некоторые из новых функций, которые еще не поддерживаются, не особенно важны. Chrome поддерживает кастомные схемы хэндлеров, но не поддерживает кастомные хэндлеры контента. Firefox не поддерживает некоторые из новых полей ввода для форм, такие, как время, месяц или неделя. Есть, по крайней мере, дюжина упущений в каждой платформе, и лишь немногие из них в настоящее время влияют на разницу в опыте обычного пользователя. Но это пока. Соответствие нужно для строительства прочной основы для будущего.
Политика браузеров
Некоторые из этих различий обусловлены глубокими политическими и финансовыми баталиями, скрывающимися за кулисами. Firefox и Chrome поддерживают видео кодеки WebM и Ogg Theora, но не MPEG-4. Safari поддерживает MPEG-4, но не WebM или Ogg Theora. По крайней мере, все они согласны с поддержкой H.264. Эти кодеки не являются официальной частью HTML5, но они являются настолько большой частью современного Интернета, что работа над ними является более важной для многих веб-разработчиков, чем все другие функции.
Другие пункты в тесте даже не являются частью официального проекта HTML5, потому что они — часть другой спецификации, которая может быть выделена из официальной спецификации HTML5. Часто бывает трудно для веб-разработчиков, программистов и особенно пользователей, нарисовать линию между тем, что есть в HTML5 и что является новой или лучшей функцией. Некоторые из наиболее привлекательных функций, таких как Web Storage и Web Workers не находятся под зонтиком HTML5, хотя они также введены консорциумом W3C. При этом, они могут иметь даже большее влияние.
Ядро спецификации HTML5 завершает добавление ряда новых тегов, предназначенных для указания роли воспроизводимого контента внутри тега. Они определяют области, разделы, отступы, нижние колонтитулы и заголовки. Раньше, мы бы отметили их тегами, которые определяют оформление
. Теперь они будут отмечены своей ролью, так что у них могут быть собственные стили CSS, и браузер соответственно отобразит эти элементы. Тенденция отделять текст и изображения от их расположения и представления на странице продолжается.
За этими изменениями стоят увлекательные дискуссии, но они важны только для людей, которые беспокоятся о внешнем виде веб-страниц. Например, есть такие, которые хотят избавиться от использования таблиц для разметки, а другие хотят помешать этому. Можно определять наличие таблицы интуитивно, по чтению атрибутов тега таблицы. Добавление границы или заголовка столбца означает, что это, вероятно, табличные данные. Выключение границы означает, что может быть разметка.
Использование элементов неправильным способом может иметь последствия не только в виде обиженных сторонников правил в Интернете. Умное перепрофилирование тегов (например, таблиц) также разрушает другие системы. Команда HTML5 тратит много ресурсов, чтобы упростить слепым и инвалидам использование Интернет. Использование тегов таблиц для чего-то, кроме данных таблиц, путает программы для чтения с экрана и другие механизмы.
Теперь есть новый класс атрибутов ARIA (Accessible Rich Internet Applications), обеспечивающий альтернативные описания данных внутри. В общем, усилия по отделению сообщения от представления помогает сделать это гораздо легче.
От веб-страниц к веб-приложениям
Множество работ осуществляется в направлении обращения статических страниц в полноценные динамические приложения. Спецификации для Web Storage, WebSockets и Web Workers стали намного толще, по мере того, как создатели браузеров выяснили, что работает, а что нет. Эти данные делают возможным для программистов создание полнофункциональных пакетов программного обеспечения, как Google Docs. Локальное сохранение данных, возможность фоновой коммуникации и многопоточность — очень важны для работы с нетривиальными наборами данных.
Изменения в основном сосредоточены на мелких деталях, которые могут быть даже не заметны для многих разработчиков. Существуют десятки небольших изменений, а также дебатов вокруг них, которые не могут быть закончены. Из-за того, что многие детали остаются неопределенными, создатели браузеров часто принимают разные решения. Спецификация Web Storage говорит, что браузеры должны «ограничить общее количество пространства, доступного для хранения» и предлагает 5MB в качестве хорошего лимита. Между тем, реализации отличаются.
Одна из наиболее спорных областей может заключаться в обработке медиа. Веб-браузер становится доминирующим способом получения доступа к видео и команда, занимающаяся спецификацией HTML, настроилась на завоевание гостиной. Спецификация Encrypted Media Extensions включает в себя сложный механизм для работы с лентой видео и ключами, так что только должным образом лицензированные браузеры смогут показать изображения. Chrome, Opera и Safari поддерживают эти мультимедийные расширения; Firefox и Internet Explorer — нет.
Существует много другой работы, направленной на создание изменяющихся частей. Один из новых проектов, который называется Web Video Text Tracks, исследует стандартный механизм для синхронизации видео с другими частями сайта. Он, в основном, направлен на подписи, но нет никаких причин, почему он не найдет другие применения: слова, графики и изображения, перемещающиеся везде; и все браузеры его поддерживают.
Будущее Web
В то время как естественно думать о внедрении спецификации HTML5 в конце длительного процесса ее развития, лучше рассматривать это как начало следующего поколения. Некоторые из идей были выброшены из спецификации 5.0, потому что не было достаточно «опыта внедрения». Другими словами, функции не существовали достаточно долго, чтобы все узнали — являются ли они тем, что мы хотим.
Быстрый просмотр спецификации HTML 5.1 в виде проекта, включает в себя такие функции, как атрибут accesskey для добавления клавиатурных эквивалентов щелчкам мыши. Существует боле расширенная поддержка во всех браузерах для API редактирования HTML, которые делают каждую веб-страницу потенциально редактируемой, а всю сеть потенциально одной большой Википедией.
Могут появиться даже большие изменения, поскольку некоторые предпочитают, чтобы HTML был более похож на XML. Это не просто попытка закрыть все открытые теги, что, очевидно, приведет к багам у некоторых разработчиков. Некоторый члены сообщества, обсуждающего спецификации HTML5, уже говорят о возможностях «взлома» следующей версии. То есть, они хотят спецификацию, которая позволит нам определять наши собственные тэги и наш собственный механизм для обработки тегов после того, как они будут проанализированы.
Это может сделать разметку гораздо более эффективной. Любой, кто нажимал на кнопку «View Source», видел, что многие файлы HTML на 50-60% состоят из тегов
Все эти решения ожидают нас в будущем. Этап HTML 5.0 является значительным, но это только пауза в развитии стандарта, который определяет, как мы представляем информацию и взаимодействуем с ней.
Достаточно обобщений - время покопаться в браузерах.
Браузер №1: Google Chrome
Chrome имеет самый высокий балл по HTML5Test — 523 для Chrome 42 — и многое говорит о приверженности компании Google спецификации HTML5 и стремлении создать один из ведущих браузеров. Осталось только несколько не отмеченных пунктов для команды программирования, чтобы заработать максимальный балл.
Упущения несколько разбросаны, и нельзя их суммировать одной фразой. Пропавший элемент разметки здесь и нереализованный графический метод там. В общем, Chrome — мечта для тех, кто привержен широкому набору инструментов для создания пользовательских интерфейсов. Если вы хотите использовать все новые методы разметки или элементы формы, Chrome — это лучший выбор. У него очень мало пробелов в списке.
Некоторые из самых больших упущений находятся под капотом. В нем нет хуков в движке JavaScript, которые отвечают за отдельные события, когда скрипты запускаются и останавливают выполнение. Нет простого способа контролировать как стили CSS влияют на страницу. Также не существует возможности использовать свой код для регистрации функции, которая обрабатывает все данные определенного типа MIME или URL схемы, так называемых пользовательских обработчиков контента.
Все три идеи, кстати, были давно реализованы в Firefox. Они не были приняты командой из Google.
Еще одна область, которая может принести разочарование — поддержка кодеков и медиа форматов. MPEG-4, например, работает с браузером iOS, но не с Chrome. Apple и Microsoft поддерживают выбор аудиодорожки, и Apple поддерживает видео выбор трека, но Chrome не позволяет вам это использовать.
В целом, Chrone — отличный браузер для тех, кто хочет начать использовать дополнительные функции, которые являются частью нового стандарта.
Браузер №2: Opera
На момент написания, Opera находится на втором месте в тесте HTML5Test, но отстает только на четыре пункта — 519 баллов для версии 29. Как и Chrome, Opera предлагает широкую поддержку новых элементов разметки и форм, так что это такая же хорошая платформа, как и Chrome для желающих поэкспериментировать с ними.
Opera также не поддерживает пользовательские обработчики контента, контекстные элементы стиля и события выполнения сценария. Однако таким же образом поступает любой другой браузер, кроме Firefox.
Самые большие различия лежат в кодеках. Opera не может поддерживать видео форматы MPEG-4 и H.264. Ситуацию осложняет то, что данный браузер также не поддерживает AAC и MP3 -два аудио формата, которые существуют достаточно давно. Таким образом, заставить ваш мультимедийный контент работать с Opera немного сложнее. Opera почти наверняка окружена расходами на лицензирование патентов, и компания, вероятно, предпочла проигнорировать большие затраты на лицензирование. Opera, конечно, поддерживает Ogg Vorbis Ogg Theora и WebM, которые являются достаточно хорошими, если не буквально совместимыми.
Наряду с Internet Explorer и Chrome, Opera развивается в направлении «pointer events», обобщая различные модели ввода. Они направлены, чтобы упростить поддержку мыши, сенсорных экранов и стилусов, предлагая программисту единую простую модель событий, что гармонизирует их.
В целом, Opera — браузер, который впечатляет, но который не получает столько внимания, сколько бы следовало. Он конкурирует только с Chrome по широте поддержки современных веб-функций.
Браузер №3: Mozilla Firefox
По баллам Firefox выглядит, как будто он слегка отстает от двух лидеров. Он набрал 449 баллов в тесте HTML5Test для Firefox 37, но этот факт в значительной степени зависит от важности функций, которую тест определяет сам. Firefox теряет много очков в некоторых областях, где он отстает, и получает меньше очков в тех областях, где ведет.
Много баллов теряется, например, потому, что Firefox не реализует многие из новых полей ввода и интерактивных элементов. Если вы хотите просто добавить один элемент формы для сбора значения даты или времени, Firefox не поможет. За эти упущения, он теряет 26 баллов, но не ясно, действительно ли страдают все программисты. Есть разработанная библиотеки JavaScript для получения данных времени, и они являются кросс-браузерными. Многие из них также отлично стилизованы и лучше выглядит, чем стандартные инструменты. Таким образом, многие программисты выбирают их, а не встроенную в браузеры поддержку.
Тест также не вознаграждает Firefox за проявленную инициативу. События, которые срабатывают, когда сценарий собирается выполнятся, полезны для регулировки, но поддержка этих событий выполнения скрипта дает Firefox только один балл. Добавление рамки к стилям листов полезно для объединения нескольких стилей листов, но это стоит всего два очка в глазах создателей теста HTML5Test.
Firefox больше не выигрывает никаких баллов за реализацию разметки микроданных, дополнительных тегов, которые позволяют проще определять и отмечать некоторые наиболее часто встречающиеся типы данных на веб-страницах. Нелюбимые консорциумом W3C и всеми другими браузерами, микроданные поддерживаются только в Firefox.
Firefox предлагает широкую поддержку кодеков, но избегает MPEG-4, оставив его в том же лагере, что и Chrome и Opera. Он поддерживает Ogg, WebM и H.264, которых более чем достаточно.
Являются ли эти различия важными? Все зависит от того, как вы оцениваете функции лично. Если вам нравятся все новые элементы форм, Firefox не для вас и вашего проекта. Но во многих отношениях, Firefox предлагает тот же уровень соответствия, как и браузеры с более высокими результатами, если вас не беспокоят новые временные поля ввода.
Браузер №4: Apple Safari
На тесте HTML5Test Safari зарабатывает 396 балла, что делает его отстающим больше, чем это может быть на практике. Как и Firefox, Safari теряет большое количество баллов, не сумев реализовать все возможные формы и элементы разметки. В нем нет опций, чтобы сделать поле ввода для сбора времени или цвета и никакой поддержки для стандартных элементов меню.
Хотя, разработчики игр, могут отпасть. В нем нет поддержки для отслеживания ориентации или движения устройства, для контроля геймпада или более общих указателей событий. Если вы собираетесь создавать что-то для Safari, лучше придерживаться традиционного контента и избегать элементов, которые слишком интерактивны. Оставьте это для App Store.
В мире кодеков, путь Apple отличается от Chrome и Firefox. Safari покажет MPEG-4 и H.264 видео, но отвергнет WebM и Ogg Theora. Хорошей новостью является то, что видео и аудио дорожками можно управлять с помощью JavaScript.
Есть несколько других мест, в которых Safari отстает от более полных наборов функций Chrome, Opera и Firefox. В то время как эти браузеры поддерживают коммуникации peer-to-peer с помощью WebRTC, Apple не предлагает никакой поддержки, как и Internet Explorer. Также Safari не поддерживает service workers для фоновой обработки, кастомные схемы, обработчики контента и настраиваемых провайдеров поиска.
Эти упущения не являются катастрофическими. Apple по-прежнему предлагает широкую поддержку стандарта и обеспечивает многие из самых интересных функций.
Браузер №5: Microsoft Internet Explorer
11-я версия Internet Explorer имеет низкий балл в тесте HTML5Test — лишь 348, но это не должно вызывать большого удивления. Движение стандартов всегда обусловлено надеждой стимулировать конкуренцию и вытеснить Microsoft с позиций контроля над сетью. Все работает именно так, как некоторые надеялись.
IE теряет баллы во всей таблице, он не может собрать их достаточно, чтобы лидировать хотя-бы в одной области. На самом деле, единственная область, где он бьет какой-либо из других крупных браузеров — веб-приложения, где его поддержка настраиваемых поставщиков поиска чуть лучше, чем у Safari. В остальное время, он замыкает шествие.
В то время как, конечно, справедливо — использовать более низкий балл за отсутствие реализации каждого бита стандарта HTML5, это не показывает, насколько хорошо IE будет исполнять код HTML5 в повседневной работе. Быстрый просмотр результатов показывает, что многие из потерянных функций являются новыми и далеко не самыми важными. IE потерял очки, например, за отсутствие поддержки CSS селекторов, типа «in-range», «out-of-range» и «read-only». Ему также не хватает поддержки ряда новых полей ввода для времени.
Есть десятки мест, где IE не хватает поддержки маленьких функций или дополнений, но ни одна из них не является критической. Конечно, это раздражает некоторых программистов, которые хотят их использовать, но это не помешает браузеру работать достаточно хорошо.
Есть несколько более крупных упущений. Microsoft избегает видео MPEG-4, OGG и WebM, а также аудио PCM, OGG и WebM. Это оставляет MP3-аудио, видео H.264 и Flash-видео в качестве единственных поддерживаемых стандартов. Тем не менее, IE позволяет использовать JavaScript для управления аудио-треками.
Стоит отметить, что Microsoft четко понимает значение соблюдения стандартов, и делает быстрые успехи. Несмотря на то, что версии Internet Explorer не меняются так часто, как у других браузеров, довольно недавно IE9 получал всего 113 баллов. И темпы будут ускоряться в новом веб-браузере Edge (Project Spartan), который будет поставляется с Windows 10.
Последняя версия Edge зарабатывает 390 в тесте HTML5Test. Это лучше, чем IE 11 и лишь немного меньше Safari. Самые большие улучшения по сравнению с IE — поддержка ориентации устройства, движения устройства, контроля геймпада, Web-аудио, DRM, медиа-расширения и отображение адаптивных изображений. Все это показывает, что игры, развлечения и мобильные устройства находятся в верхней части списка приоритетов Microsoft.
HTML5Test является очень точной метрикой, но важно помнить, что он построен для оценки — поддерживают ли браузеры самые новые и самые экспериментальные функции, принятые комитетами HTML5. Он не выдает очки за выполнение хорошей работы при отображении таблицы или за быстрый рендеринг страниц. Это большой перечень функций, а не показатель качества браузера.
Результаты также обеспечивают хорошее представление о корпоративных приоритетах. Не удивительно, что Chrome предлагает отличную поддержку полнофункциональных, похожих на приложения сайтов, которые поставляет Google. Это также упрощает предоставление больших возможностей аппаратной платформе от Google — Хромбукам. Компания немного зарабатывает на той части, которая называется «операционной системой», так что не удивительно, что она хочет, чтобы часть, известная как «браузер», была лучше.
Apple, со своей стороны, кажется, не столь заинтересована в поддержке соревновательного поведения в браузерах, может быть, потому что зарабатывает так много денег на App Store, что не хочет его подорвать.
Многие из функций, с которыми браузеры не в ладах, не имеют значения и для разработчиков. Если вы создаете веб-приложения с большим количеством DOM элементов, которые генерируют AJAX вызовы и реагируют на ответ сервера, все браузеры хорошо справляются с такой работой.
Все они предлагают те же основные функции, и не имеет большого значения — реализовали ли они последние элементы форм.
В этом смысле, оценка HTML5Test говорит больше о будущем, чем о настоящем. В то время как стандарт HTML 5.0 уже установлен и комитет обратил свое внимание к следующему набору идей, создатели браузеров должны закончить внедрения стандарта. По мере того, как они это делают, все больше и больше веб-разработчиков увидят, что новые функции доступны и готовы к использованию. Только после этого пользователи начнут видеть преимущества.
Хорошей новостью является то, что производители браузеров принимают их быстро, и многие из функций охвачены достаточно широко, чтобы веб-разработчики начали их использовать. Комитет сделал свою работу. Теперь наша очередь.
ХТМЛ – это язык разметки веб-страниц, по сути он отвечает за правильное отображение всех элементов на странице. Постепенно выпускаются новые спецификации языка, последней является пятая версия, которая принесла упразднение старых и внедрение новых тегов и функций. C HTML5 Yandex браузер стал поддерживать проигрывание видео через собственный Video Player, который не требует установку других плагинов, вроде Adobe Flash Player. Встроенный функционал языка позволяет воспроизвести любой фильм на сайте, поддерживающий HTML5.
При отсутствии HTML5 для браузера Яндекс для воспроизведения видео и части музыки приходилось пользоваться Flash Player. Получалась ситуация, при которой стандартными средствами браузера невозможно было прослушать музыку. Наибольший приток пользователей к Flash был спровоцирован появлением крупнейшего видеохостинга YouTube. Со временем другие крупные компании, например, Apple, стали использовать его для обработки видео.
Прирост пользователей продолжался долгое время, сразу после выхода HTML 4.01 наблюдался большой скачок популярности. Отток произошёл лишь после выпуска новой спецификации HTML5, которая впервые появилась в 2012 году, но полноценный запуск произошёл в 2014 году.
К переходу на HTML5 видео проигрыватель подталкивает несколько основных недостатков плагина от Adobe:
- Необходимость дополнительно устанавливать в систему. Со временем его добавили в Google Chrome по умолчанию;
- Низкая скорость работы и частые перебои в загрузке;
- Плохая стабильность работы, нередко появлялись сбои, конфликты, часто приходилось перезагружать страницу.
Преимущества HTML5 в сравнении с Adobe Flash Player
Технологии по своей сути отличаются, но предназначаются для одних и тех же задач. Для пользователей и разработчиков новый стандарт ХТМЛ5 принёс массу преимуществ:
- Открытый код. Программист самостоятельно может доработать код. Полезно для повышения безопасности бизнес-ресурсов и приложений;
- Быстрое развитие. Разработкой занимается продвинутая компания W3C, которая черпает хорошие идеи у пользователей, дорабатывающих стандарт;
- Совместимость с большинством платформ. Flash Player не поддерживается на Android до 2.01 и 4.1х и более новые варианты, также плагин несовместим с iPhone и iPod. Для работы нового проигрывателя требуется иметь относительно новую версию Yandex browser;
- Энергоэффективная технология. Видео плеер HTML5 потребляет значительно меньше ресурсов процессора, соответственно, экономит заряд, что важно для любого мобильного телефона.
Что такое HTML5 Video Player для браузера Яндекс?
HTML5 Video Player является программой, предназначенной для конвертирования видеофайлов в формате HTML5. Дополнительно через приложение можно смотреть видео, но такой необходимости не возникает с современными возможностями Яндекс обозревателя. В программу можно загрузить любой файл распространённых видео форматов: mp4, AVI, MKV.
После обработки файла он будет пригоден для загрузки на сервер, функция публикации уже встроена в программу. До заливки на сервер видео можно просмотреть в браузере. Загрузить программу лучше с официального сайта
.
Некоторые пользователи жалуются, что приложение не работает, закрываясь сразу после загрузки в неё файла. Устранить проблему помогает переустановка или отключение антивируса. Чтобы не заниматься поиском причин неисправности, лучше воспользоваться аналогичной программой — Free HTML5 Video Player.
Процесс использования обеих приложений аналогичен:
Чтобы вставить ролик на сайт, достаточно скопировать JavaScript код со страницы в браузере, которая открылась после конвертации, и вставить в блок для видео на веб-ресурсе.
Как посмотреть HTML5 Video в Яндекс браузере
На самом деле никаких особых методик для просмотра видео в интернет формате HTML5 не потребуется. Чтобы начать просмотр, достаточно перейти на видео и браузер всё сделает самостоятельно. Воспроизвести видео на YouTube и многих других сервисах не составляет труда, сегодня этот видеохостинг работает исключительно с форматом ХТМЛ5, только для устаревших обозревателей происходит автоматическое переключение на старый Flash Player.
Иногда не получается просмотреть видео в формате HTML5 при наличии ошибок. Технология относится к относительно стабильным способам просмотра визуального контента и звука, но периодические провоцирует ошибки:
Иногда помогает обновление Яндекс обозревателя:
Для рядового пользователя просмотреть видео в HTML не составляет сложности, но важно наличие поддержки формата со стороны сервиса. Известная социальная сеть Facebook не работает с HTML5, но есть способ открыть эту возможность посредством расширения HTML5 Video Player, его можно скачать по ссылке .
ХТМЛ 5 – это общедоступный формат, который поддерживается всеми современными браузерами, его не нужно отдельно устанавливать. С помощью программы HTML5 Video Player для Яндекс браузера можно посмотреть, загрузить видео и преобразовать различные форматы в ХТМЛ5, сделав их доступными для онлайн просмотра.
Перед изучением новых тегов необходимо ознакомится с инструментами поддержки тегов браузерами. Для проверки тега, можно использовать htmlbook с иллюстрациями:
Поддержка тега center в спецификациях HTML
Видно, что тег
Рекомендация не использовать тег center в коде html5
Таким образом, используя данные ресурсы можно ориентироваться в правильности применения тегов и их поддержке со стороны браузеров.
Рассмотрим новые введенные элементы.
Тег audio
Тег
Если тег не поддерживается, то будет выведено сообщения внутри тега с предложением скачать файл напрямую.
Тег audio не поддерживается вашим браузером.
|
Атрибуты описанные в примере:
- controls – выводят проигрыватель. Если их не указать, то получим играющую музыку без возможности выключения
- autoplay – автоматическое проигрывание после загрузки, не стоит использовать данный атрибут без крайней необходимости
- loop – зациклить проигрывание
Обратите внимание, что внешний вид проигрывателя в разных браузерах разный.
Тег video
Позволяет внедрить на страницу видеопроигрыватель без использования сторонних сервисов. Также, как и тег
Тег video не поддерживается вашим браузером. Скачайте видео.
|
Атрибуты аналогичны тегу
Данный тег используется для создания блоков с видео в виде фона.
Тег canvas
Используется для рисования в HTML5. Применение canvas позволило отказаться от технологии Flash. Рисование производится с помощью JavaScript. Использования тега
Ваш браузер не поддерживает рисование.
|
Тег datalist
Используется для создания «умных» выпадающих списков. Дублирует функционал выпадающего списка, но добавляет к нему возможность поиска пунктов по буквам входящим в слова и введения своего варианта. Идеален для применения к спискам, пункты которых известны заранее.
К сожалению, поддержка браузерами очень ограничена. Более того, на сегодняшний момент браузеры демонстрируют абсолютно разную работу с данным элементом. Пока стоит воздержаться от применения.
Тег details
Позволяет создавать раскрывающийся при клике блок. Используется совместно с тегом
Бендер Родригез
|
Поддержка данного тега – частичная, как следствие, на данном этапе лучше применять решения на основе JS или jQuery.
Тег meter
Используется для визуализации диапазонов величин. Пример применения:
Позволяет задавать минимально, максимальное значение диапазона, значения которые считаются низкими и высокими, текущее значение (value). Возможно управление с помощь JS. Хороший инструмент для простой визуализации.
Тег nav
Тег используется для обозначения главной навигации по сайту. Содержит внутри себя список (хотя могут быть и другие элементы). Пример:
|
