YouTube включил HTML5 по умолчанию / Хабр
atomlibВремя на прочтение 3 мин
Количество просмотров 29KРабота с видео *
Очередной гвоздь в крышку гроба браузерного плагина Adobe Flash
Поддержку тэга
</code> на YouTube <a href="http://habrahabr.ru/post/97915/">добавили ещё в 2010 году</a>. На относительно полный переход на HTML5-видео ушло четыре с половиной года, но он наконец состоялся.
В блоге видеохостинга была размещена <a href="http://youtube-eng.blogspot.ru/2015/01/youtube-now-defaults-to-html5_27.html">запись</a>, рассказывающая о том, что теперь плеером по умолчанию для большинства пользователей будет HTML5-версия вместо плагина на Flash. Новый плеер включён по умолчанию пока не у всех, а <strong>только в Chrome, Internet Exporer 11, Safari 8 и в тестовых версиях Firefox</strong>.
<anchor>habracut</anchor>
Когда летом 2010 года YouTube добавил опциональный плеер на основе HTML5, технология имела очень экспериментальный характер. Чтобы понять, насколько давно это было: iPad и бум планшетов тоже начались в 2010 году. С годами стандарт взрослел, и улучшалась его поддержка во всех основных браузерах. Для YouTube последним барьером для полного перехода к нативному проигрыванию без плагинов была поддержка адаптивного битрейта, технологии, которая позволяет учитывать состояние канала пользователя для выбора качества потока.
И пусть <a href="https://w3c.github.io/media-source/">Media Source Extensions</a> вызывал <a href="http://www.w3.org/blog/2013/03/drm-and-the-open-web/">некоторое неприятие</a> у сторонников открытого веба, поскольку стандарт позволяет реализовывать DRM-защиту в веб-браузерах, но во многом благодаря нему состоялся этот переход. Адаптивный битрейт снизил время буферизации на 50 процентов по всему миру и на 80 в нагруженных сетях.
<img src="https://habrastorage.org/files/27f/3de/9f2/27f3de9f233b4c58abe55cf8667600cd.png"/>
<em>Так выглядит страница <a href="https://www.youtube.com/html5">youtube.com/html5</a> в браузере Chrome</em>
Другой важной составляющей является разработанный Google кодек VP9. С ним видеоролики начинаются на 15—80 процентов быстрее, используемый трафик падает на 35 %, а к контенту в 4K и HD-качестве с частотой 60 кадров в секунду получает доступ всё больше пользователей. С помощью VP9 серверы YouTube уже раздали сотни миллиардов роликов.
Также с помощью <a href="https://w3c.github.io/encrypted-media/">Encrypted Media Extensions</a> и Common Encryption возможна реализация DRM-защиты. Раньше подобное приходилось делать на основе Adobe Flash Access, Microsoft Silverlight PlayReady и других технологий, из-за этого защита была завязана на платформу доставки и даже формат файла. Видеочаты Google Hangouts тоже <a href="https://plus.google.com/103171586947853434456/posts/39TCW3PcLye">уже давно</a> не требуют установки специальных плагинов за счёт стандарта <a href="https://w3c.
github.io/webrtc-pc/">WebRTC</a>. Наконец, нужна была возможность разворачивать контент на весь экран, и теперь она <a href="http://www.w3.org/TR/fullscreen/">есть</a>.
<a href="https:https://habrastorage.org/files/8a8/43b/df2/8a843bdf26b841098f02a7456c6c6513.png"><img src="https://habrastorage.org/files/8a8/43b/df2/8a843bdf26b841098f02a7456c6c6513.png"/></a>
YouTube будет избавляться от встраиваемых роликов с тэгами <code><object></code> и <a href="https://developers.google.com/youtube/flash_api_reference">Flash API</a>. Веб-мастерам рекомендуется использовать врезки <code><iframe></code> — так пользователь будет получать тот плеер, который поддерживает его браузер.
Flash сдаёт позиции. Плагин часто критиковал, к примеру, <a href="http://habrahabr.ru/post/93026/">Стив Джобс</a>. Ему не нравилась закрытость, высокое расходование энергии, низкая производительность и регулярное появление уязвимостей.
Расставание с Flash — это знаковое событие: именно благодаря ему десять лет назад было возможно появление самого YouTube.
Теги:- YouTube
- Adobe Flash
- HTML5
- HTML 5
- <video>
- потоковое видео
- видео
- видеохостинги
- Работа с видео
Всего голосов 24: ↑23 и ↓1 +22
Комментарии 38
@atomlib
Замглавреда
YouTube HTML5 видео Windows Movie Maker Формат видеофайла, YouTube, фотография, электрический Blue, конвертер png
YouTube HTML5 видео Windows Movie Maker Формат видеофайла, YouTube, фотография, электрический Blue, конвертер pngтеги
- фотография,
- электрический Blue,
- конвертер,
- технология,
- телешоу,
- учебник,
- видео,
- видео Формат файла,
- windows Movie Maker,
- постпродакшн,
- бренд,
- маркетинг,
- логотипы,
- hTML5 Video,
- GOM,
- GIRA,
- образовательный фильм,
- YouTube,
- png,
- прозрачный,
- бесплатная загрузка
Об этом PNG
- Размер изображения
- 576x480px
- Размер файла
- 112.
06KB
- MIME тип
- Image/png
изменить размер PNG
ширина(px) высота(px)Лицензия
Некоммерческое использование, DMCA Contact Us
- серый и черный значок с ‘хлопушкой’, Редактирование видео Компьютерные иконки Редактирование фильмов, Монета, угол, музыка Видео, фильм png 1024x1024px 595.96KB
- Программное обеспечение для редактирования видео Movavi Video Editor Movavi Video Converter Movavi Screen Capture Studio, видеомагнитофон, Разное, текст, другие png 1200x1200px 29.89KB
- Видео плеер, играть вместе, угол, текст, фотография png 602x601px 12.71KB
- Видеокамеры YouTube, YouTube, прямоугольник, фотография, черный png 800x800px 17.1KB
- Видео производство HTML5 видео, видео значок, синий, угол, прямоугольник png 998x877px 195.72KB
- Буферизация видео воспроизведения, Цифровое видео YouTube Computer Icons, Youtube Video Player Icon, текст, атмосфера, фотография png 643x396px 5.83KB
- Редактирование видео Смартфон Редактирование фильмов Компьютерные иконки, смартфон, гаджет, электроника, мобильный телефон png
512x512px
276.
31KB
- YouTuber Vlog, YouTube, угол, изображение Форматы файлов, фотография png 700x393px 55.03KB
- Аудио формат файла Компьютерное программное обеспечение Android Freemake Video Converter, Android, текст, оранжевый, логотип png 1024x1024px 584.22KB
- Цифровое видео Flash Video MPEG-4 Part 14, Android, электроника, музыка Видео, музыка Скачать png 512x512px 207.08KB
- иллюстрация видеофильма, Freemake Video Converter Преобразование данных Формат видео файла Видео высокой четкости, кино, угол, Android, MPEG4 часть 14 png 1205x1117px 308.67KB
- Компьютерные иконки YouTube Video player Музыка, Youtube Video Player Icon, угол, текст, прямоугольник png
512x512px
25.
96KB - Компакт-диск Цифровой звук VOB Freemake Video Converter Компьютерные иконки, другие, другие, windows, цифровое аудио png 512x512px 231.94KB
- Восстановление данных Формат видео файла Компьютерное программное обеспечение, значок видео, Разное, другие, данные png 1024x1024px 568.91KB
- Форматы файлов формата TIFF Raw Расширение имени файла, Adobe shop Icon, Разное, форматы файлов изображений, фотография png 512x512px 85.42KB org/ImageObject»> YouTube Video 2018 Сан-Бруно, Калифорния, съемки рекламного телеканала, красиво, телевидение, текст, логотип png 1200x630px 169.89KB
- YouTube HTML5 видео, YouTube, синий, логотип, видео-плеер png 1000x758px 49.33KB
- Слайд-шоу ПО для слайдшоу macOS Бесплатное программное обеспечение, Шоу, Разное, фиолетовый, гаджет png 1024x1024px 1.18MB
- Любой видео конвертер Total Video Converter Freemake Video Converter видео формат файла, исходный файл psd, фиолетовый, текст, логотип png 512x512px 162.75KB
- Windows Media Player Компьютерное программное обеспечение, окно, синий, мебель, текст png 1024x1024px 50.84KB org/ImageObject»> Музыкальное видео, Маркетинг, фотография, логотип, музыка Видео png 800x600px 232.66KB
- Музыка Видео формат файла MPEG-4 Part 14 MP3, значок файла, угол, текст, прямоугольник png 512x512px 6.77KB
- Видеоурок YouTube Айдын Тикарет Борсаши Билим ве Санат Меркези HTML5 видео, YouTube, текст, логотип, аватан png 512x512px 38.77KB
- YouTube значки компьютеров Видео Windows Movie Maker, YouTube, угол, треугольник, логотип png 512x512px 7.67KB
- Windows Media Видео значки компьютеров MPEG-4, часть 14, другие, текст, прямоугольник, другие png 512x512px 19.61KB org/ImageObject»> Total Video Converter Sahiba Films International, кинозал, другие, фильм, кадрирование png 880x450px 86.32KB
- Видеоигра YouTube Телепередача Музыка, Дизайн цитат, игра, текст, фотография png 2038x1150px 39.34KB
- Видеоплеер Computer Icons Android, кнопка воспроизведения, угол, электроника, видео плеер png 1024x1024px 141.69KB
- YouTube Love a Loser Instagram Видео, неудачник, угол, текст, логотип png 700x524px 106.93KB
- Любой видео конвертер Freemake Video Converter Windows DVD Maker Windows Movie Maker, DVD, прямоугольник, штраф, редактирование видео png 512x512px 238.61KB org/ImageObject»> Магазин приложений Moving Experts macOS MPEG-4, часть 14, хранилище винограда, логотип, магазин приложений, технологии png 512x512px 212.91KB
- Маркетинг на основе аккаунта Видео Бренд YouTube Реклама, YouTube, угол, текст, услуга png 800x800px 45.47KB
- YouTube Playlist Компьютерные иконки Видео, YouTube, телевидение, угол, текст png 1024x1024px 10.53KB
- Kindle Fire Android VLC медиаплеер Видео высокой четкости, кнопка воспроизведения, угол, видео-плеер, медиа-плеер png 1801x1801px 928.71KB
- Форматы обработки данных Формат видеофайлов, другие, Форматы файлов изображений, текст, фотографии png
512x512px
16.
77KB
- Amazon.com Amazon Video Amazon Prime YouTube Потоковое мультимедиа, приложение, текст, логотип, наклейка png 512x512px 15.16KB
- Анимото Windows Movie Maker Редактирование видео, лоза, синий, угол, фотография png 1024x1024px 111.11KB
- AVCHD Freemake Video Converter Формат видеофайлов .m2ts Формат обмена материалами, другие, Разное, логотип, другие png 512x512px 108.9KB
- Компьютерное программное обеспечение Adobe Systems Adobe shop Элементы Windows Gallery, магазин частиц, синий, текст, логотип png 666x666px 34.88KB
- MPEG-4 Part 14 MP3 Аудио формат файлов Музыка, форматы файлов, Разное, текст, прямоугольник png
512x512px
7.
18KB
- Музыкальное видео HTML5 видео высокого разрешения видео, другие, текст, логотип, другие png 1500x500px 279.68KB
- DVD Ripping Final Cut Pro Windows Movie Maker Компьютерное программное обеспечение, CD / DVD, синий, электроника, текст png 1024x1024px 409.67KB
- Warner Bros. Интерактивные развлечения Warner Bros. Обзор маркетинговых исследований Quirk ‘s International TV Production, tv logo, Разное, телевидение, текст png 1928x2132px 321.5KB
- Форматы видеофайлов Приложения для Android Flip Video, Flip Camera Icon, Разное, другие, мобильные телефоны png 512x512px 59.52KB org/ImageObject»> Логотип YouTube Потоковое мультимедиа Ramped Up, YouTube, синий, текст, логотип png 800x800px 9.52KB
- Редактирование видео Телевизионное шоу HTML5 видеоурок, Tarpon Home Watch Llc, электроника, гаджет, компьютер png 512x512px 129.28KB
- Саундтрек Про Фильм Музыка, другие, Разное, другие, фильм png 512x512px 146.85KB
- Иконки компьютеров Редактирование видео, значок видео, разное, угол, текст png 1600x1600px 28.17KB
Видеоплеер YouTube HTML5
Видеоплеер YouTube HTML5Блог – OodlestechnologiesОтправленный: Oodles Admin | 02 ноября 2015 г.
HTML
Теперь YouTube поддерживает потоковую передачу видео в формате HTML5 во всех современных браузерах. Поддерживаемые современные браузеры включают Google Chrome, Safari 8, Firefox, Opera и Internet Explorer. Теперь на YouTube пользователи могут подписаться на видео в формате HTML5. Это возможно при использовании видеокодека h.264 и формата WebM. Формат WebM использует кодек VP8. Это дает более высокое качество видео при уменьшении пропускной способности. Новые API, которые позволяют YouTube показывать видео в полноэкранном режиме со стандартным пользовательским интерфейсом HTML.
Поддерживаемые браузеры:
Firefox 4, поддерживает WebM
Google Chrome, поддерживает WebM
Opera 10.6+, поддерживает WebM
Apple Safari, поддерживает h.264
Microsoft Internet Explorer 9, поддерживает h.264, WebM
Microsoft Internet Explorer 6, 7 или 8, только с установленным Google Chrome Frame
Принятие адаптивного битрейта (ABR) привело к исправлению стандарта HTML5. YouTube говорит, что ABR позволяет сайту изменять разрешение для зрителей в зависимости от качества сети. ABR уменьшил буферизацию на более высокий процент во всем мире. И целых 80 процентов в сильно перегруженных сетях. Эта технология также позволяет людям транслировать свои игровые сессии в прямом эфире на Xbox One и PlayStation 4 и использовать потоковые устройства, такие как Chromecast.
В то время как поддержка видео HTML5 позволяет перенести большую часть контента и функций YouTube на устройства, не поддерживающие Flash Player. Кроме того, ниже перечислены некоторые дополнительные преимущества HTML5.
Преимущества HTML5:
Защита контента
Надежная потоковая передача видео
Стандартный формат
Полноэкранное видео
Инкапсуляция + встраивание
Доступ к камере и микрофону
Ограничения видео HTML5 на YouTube
В случае, если пользователь пытается воспроизвести видео в веб-браузерах Firefox или Opera, необходимо включить транскодирование WebM в видео для воспроизведения с использованием HTML5. Кроме того, если пользователь уже согласился на дополнительные эксперименты YouTube, проигрыватель HTML5 может не предоставляться и по умолчанию будет использоваться проигрыватель Flash.
Об авторе
Oodles Admin
Дивья имеет более чем 6-летний опыт работы в различных областях — SAP EP, управление качеством поиска и написание контента. Она любит путешествовать по миру, а также любит смотреть фильмы.
Еще от Oodles
Запрос предложений
Файлы cookie важны для правильного функционирования сайта. Чтобы улучшить ваш опыт, мы используем файлы cookie, чтобы запоминать данные для входа и обеспечивать безопасный вход в систему, собирать статистику для оптимизации функциональности сайта и предоставлять контент, соответствующий вашим интересам.
Нажмите «Принять и продолжить», чтобы принять файлы cookie и перейти непосредственно на сайт, или нажмите «Просмотреть настройки файлов cookie», чтобы просмотреть подробные описания типов файлов cookie и выбрать, принимать ли определенные файлы cookie во время пребывания на сайте.
Включение видеопроигрывателя HTML5 YouTube
Поиск
Недавно было много дискуссий о HTML5 и о том, как он заменит проприетарные технологии, такие как Adobe Flash. YouTube уже вносит изменения и позволяет пользователям подписаться на пробную версию видео HTML5. Это позволяет пользователям просматривать видео с использованием видеокодека h.264 и формата WebM (в котором использовался кодек VP8). В этой статье мы подробно обсудим использование YouTube HTML5, как вы можете начать его использовать, а также текущие ограничения видео YouTube HTML5.
Браузеры, поддерживаемые пробной версией HTML5 для подписки на YouTube
Страница HTML5 для подписки на YouTube

После регистрации пользователь может использовать проигрыватель HTML5 вместо традиционного проигрывателя Adobe Flash для поддерживаемых видео (в настоящее время видео с рекламой не поддерживаются, и он вернется к воспроизведению в проигрывателе Flash).
Формат WebM
Некоторые браузеры, например Microsoft Internet Explorer 9, поддерживают несколько видеоформатов HTML5. IE9 позволяет зрителям смотреть видео в формате WebM, а также в кодеке h.264. По умолчанию после включения они будут видеть поддерживаемые видео в формате h.264. Если пользователь хочет просмотреть видео в формате WebM, ему сначала необходимо установить WebM для IE9.кодек. WebM для IE9 поддерживает как Windows 7, так и Windows Vista, но все еще находится в состоянии предварительной версии.
Видео, в котором используется формат WebM
Поиск видео WebM на YouTube
После того, как пользователь установил кодек WebM для IE9, видео WebM по-прежнему не будет отображаться автоматически, а не Flash — пользователь должен искать именно видео, использующие эту технологию. Для этого им необходимо выполнить следующие действия:
- На YouTuve ищите видео так же, как это обычно делается, по ключевому слову.
- Когда YouTube вернет результаты поиска, добавьте «&webm=1» в конце URL-адреса. Вот как это будет выглядеть: http://www.youtube.com/results?search_query=cute+dogs&aq=f&webm=1
- Нажмите клавишу Enter, чтобы повторно отправить URL-адрес.
- После повторной отправки URL-адреса в результатах будут отображаться видео WebM.
- Кроме того, вместо настройки URL-адреса вы можете использовать параметры расширенного поиска для поиска видео WebM.
Ограничения видео YouTube HTML5
Видео YouTube HTML5 все еще находится в стадии разработки, и поэтому все еще существуют некоторые ограничения в отношении его использования. В настоящее время видео HTML5 поддерживают только ограниченный полноэкранный режим — видео заполняет браузер, но действительно будет полноэкранным только в том случае, если сам браузер поддерживает полноэкранный режим.