Введение в HTML5 видео . Мы объясним, почему поддержка видео в браузерах так важна, сделаем обзор элемента video в HTML5 и рассмотрим самые важные способы управления воспроизведением видео с помощью Java. Script. Много лет тому назад понятие мультимедиа в веб связывалось с MIDI- мелодиями и GIF- анимацией. Благодаря увеличению пропускной способности каналов связи и улучшению технологий сжатия данных MP3 вытеснил MIDI, а видео стало распространяться повсеместно. За право захватить нишу веб- мультимедиа соревновались многие запатентованные продукты — Real Player, Windows Media Player и другие — пока один из них не вышел победителем в 2. В связи с этим элемент <video> работает также как и . Да, да, это очередная статья про html5 и тэг < video >. Firefox поддерживает кодек WebM начиная с версии 4.0. HTML5 · Видео . Adobe Flash. Это произошло во многом благодаря широкому распространению этого плагина, а также тот факт, что Flash- технология стала выбором You. Tube; Flash стал фактически стандартом для передачи видео в Интернете. Одним из самых впечатляющих нововведений в спецификации HTML5 является элемент < video> , который позволяет разработчикам вставлять видео непосредственно на веб- страницы без необходимости использования каких- либо плагинов. Opera предложила стандартный элемент < video> в качестве части HTML5 в 2. Opera 1. 0. 5. 0. Эта статья даст вам представление об элементе < video> и его API. Мы объясним, почему поддержка видео в браузерах так важна, сделаем обзор элемента video и рассмотрим самые важные способы управления воспроизведением видео с помощью Java. Любой, кто посещал YouTube.com за последние четыре года знает, что можно вставить видео на веб-страницу. До HTML5 не .HTML5 видео как фон страницы. Делал недавно промо-страничку для сайта Дельфина, для книги стихов, которая скоро . HTML5 video — элемент, включённый в проект спецификации HTML 5, который. Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 20 октября 2016; . Script. Зачем нам нужен элемент < video> ? До сегодняшнего дня если вы хотели вставить видео на страницу, вам пришлось бы разрываться между несколькими вариантами разметки. Ниже помещен пример, взятый непосредственно с сайта You. Tube. < object width=. Для создания кроссбраузерности мы также используем элемент < embed> с дублированием большинства параметров элемента < object>. Конечный код чересчур громоздкий и нелогичный. Анатомия элемента < video> По сравнению с запутанными конструкциями, которые необходимы для вставки Flash на страницу, базовая разметка тега < video> в HTML5 удивительно проста. Заметьте, что в нашем примере мы используем нестрогий синтаксис HTML5 — вы не обязаны ставить кавычки вокруг значений атрибутов и можете использовать простые булевы атрибуты, такие как Auto. Play как отдельные слова. Если вы хотите, вы, конечно, можете придерживаться синтаксиса XHTML control=. Очевидно имеет смысл выбрать свой стиль кодирования, который вам больше подходит и придерживаться его для единообразия и удобства. В XHTML5 вы должны использовать синтаксис XHTML (а также создавать страницы в виде XML с правильным MIME- типом, который в настоящее время не работает в Internet Explorer). Предназначение атрибутов элемента < video> , использованных в нашем примере, очевидно: src. Источник видео, URL видео файла. Также как и для элемента img, вы можете явно указать размеры видео — иначе будут использованы внутренние высота и ширина самого видео файла. Если вы укажите только один атрибут из двух, браузер изменит размер видео в соответствие с этим значением, сохранив соотношение сторон. Если же атрибут не указан, пользователь увидит лишь первый кадр (или указанное изображение poster) и не будет иметь возможности воспроизвести видео, пока вы не запустите видео с помощью Java. Script или не создадите собственные средства управления, о чём мы расскажем далее в этой статье. Если этот атрибут не указать, то вместо него будет показан первый кадр видео. Используйте его с осторожностью, так как это может быть крайне неудобно для пользователя, например, если у него низкая скорость соединения (или мобильный телефон). Если вы уверены, что пользователь захочет просмотреть видео, но вы не хотите использовать autoplay, вы можете установить атрибут autobuffer. Это заставит браузер начать загрузку видео после завершения загрузки страницы. Однако, Safari его не поддерживает, предпочитая кодек H. Chrome). Поэтому нам придётся конвертировать видео дважды, сначала в формат кодека Theora, а затем и в H. Заметьте, что в таком случае мы не снабжаем атрибутом src сам элемент < video> . Скачать < a href=video. Пример с использованием двух источников видео — . HTML5 видео, независимо от поддерживаемого кодека. На момент написания этой статьи (февраль 2. Microsoft не сделали официального заявления о том, какой видео- кодек они будут поддерживать (если вообще будут). Однако, тип файла MP4 может быть также воспроизведен с помощью плагина Flash, так что они могут использоваться совместно в качестве обратной связи для Internet Explorer и старых версий других браузеров. Ознакомьтесь с реализацией этого метода в статье Kroc Camen . А мы можем ответить, что это переходное решение, пока поддержка нового видео элемента не появится в большинстве браузеров. Больше нет второсортных жителей в Веб. Таким образом, мы увидели, что разметка для нового HTML5- элемента < video> во много раз более ясная и понятная по сравнению тем, как мы сейчас вставляем видео на веб- страницы с помощью Flash. Но вне зависимости от того, насколько ужасен старый способ вставки видео, в большинстве случаев он работает, ведь так? Так почему бы нам не продолжить использовать традиционный способ? Главное преимущество элемента < video> заключается именно в том, что он —полноценный житель в Веб, по сравнению с жителем окраин object или не проходящим валидацию элементом embed (хотя сейчас он её проходит в HTML5). Проблемы управления с помощью клавиатуры. Одна из больших нерешенных проблем использования Flash — недоступность управления воспроизведением с клавиатуры. За исключением Internet Explorer на Windows не существует способа взаимодействовать с Flash- роликом посредством клавиатуры. И даже если пользователи каким- то образом могут переместить фокус на Flash- ролик, не существует простого способа вернуться обратно на страницу (если только это не предусмотрено в самом Flash- ролике с помощью программирования на Action. Script). В отличие от этого, браузер полностью отвечает за элемент < video> , он может управлять воспроизведением видео и включать кнопки управления в стек табуляции. Поддержка клавиатуры в HTML5 видео в настоящее время не реализована во всех браузерах.. По мере того как браузер загружает плагин, отведенная ему область остается чёрным прямоугольником — браузер никак не обрабатывает и не интерпретирует что- либо происходящее в этой области. Обычно в этом нет никакой проблемы, но они могут возникнуть, когда ваша разметка перекрывает область с плагином. Например, представим себе сайт, который содержит Flash- ролики, а также выпадающее меню, реализованное средствами Java. Script и/или CSS, которое должно раскрываться поверх Flash- ролика. По умолчанию, область плагина размещается поверх веб- страницы, а это означает, что это меню странным образом раскроется позади ролика. Такой же неприятный эффект проявляется и в случае, когда на страницах присутствуют . Именно поэтому многие скрипты, использующие . Однако, это становится причиной того, что плагин становится полностью недоступным пользователям со скринридерами и поэтому его использования лучше избегать. Проблемы и странности также возникают, если вы осуществляете изменения в разметке динамически. Если размеры области плагина изменяются, это иногда может привести к непредвиденным эффектам — видео, воспроизводимое плагином может не измениться в размерах, а вместо этого быть обрезанным. Благодаря тому, что элемент < video> является родным в среде браузера, именно браузер заботится о его отрисовке. В связи с этим элемент < video> работает также как и любой другой элемент на веб- странице. Его можно позиционировать, применять свойство float, перекрывать или динамически изменять его размеры без каких- либо дополнительных хаков. Даже возможно достичь такого интересного эффекта, как полупрозрачное видео, просто назначив ему необходимое значение свойства opacity с помощью CSS. В качестве простой демонстрации того, что можно достичь уже сегодня, мы применим переходные эффекты CSS к нашему видео с турецкими танцами, для изменения его размеров при срабатывании событий : hover или : focus. В этом примере элемент < canvas> накладывается поверх видео (Эффект виден только во время воспроизведения). Обратите внимание на то, что < canvas> перекрывает видео не полностью. Мы сделали канву на 4. Доступ с клавиатуры к элементам управления должен работать вне зависимости от того, перекрыты ли элементы управления или нет, однако поддержка управления с клавиатуры поддерживается в настоящее время не во всех браузерах. Создание собственных элементов управления видео. Элементы < video> и < audio> являются экземплярами новых медиа- элементов HTML5 DOM, которые предоставляют мощный API, позволяя разработчикам управлять воспроизведением видео с помощью целого ряда новых методов и свойств Java. Script. Давайте взглянем на некоторые наиболее интересные из них, позволяющие создать собственный простой контроллер: play() и pause()Совершенно очевидно, эти методы начинают и останавливают воспроизведение видео. Когда фильм впервые загружен, этой позицией будет первый кадр ролика. Обратите внимание, что нет метода stop() — если вы хотите остановить воспроизведение и . При установке этого атрибута позиция воспроизведения перемещается в указанную временную позицию, если это возможно. Кроме того медиа- элементы поддерживают ряд событий в рамках своей модели обработки событий, которые мы можем перехватить или назначить. В нашем примере мы ознакомимся только с некоторыми из них: loadeddata. Возникает, когда браузер загрузил достаточный объем видео данных для начала воспроизведения с текущей позиции. Возникают, когда воспроизведение было начато или приостановлено. Если мы управляем видео с помощью Java. Script, нам понадобиться . Причиной этого может служить то, что видео воспроизводится, скрипт изменил позицию программно или пользователь решил перескочить в другую позицию видео. HTML5- видео. Раньше, если вы хотели добавить видео на веб- страницу, вам приходилось использовать элемент < object> , представляющий собой универсальный контейнер для внешних объектов. Подобные приложения были в малой степени интерактивными и слабо взаимодействовали с окружающими их элементами на веб- странице. Второй подход заключался в использовании подключаемого модуля браузера, например Silverlight или Flash. И хотя технология Flash позволяла использовать готовый видеоплеер или создавать собственный, но её использование порождало большое нагромождение HTML- разметки, а видеофайлы нужно было кодировать в требуемый формат. HTML5- видео — новый стандарт для размещения мультимедийных файлов в сети с оригинальным программным интерфейсом без привлечения подключаемых модулей. С помощью элемента < video> появилась возможность добавлять видеосодержимое на веб- страницы, а также стилизовать внешний вид видеоплеера при помощи css- стилей. Внешний вид видеоплеера в основных браузерах. Элемент < video> Поддержка браузерами. IE: 9. 0, атрибут muted — с 1. Edge: 1. 2. 0. Firefox: 3. Chrome: 4. 0, атрибут muted — с 3. Safari: 4. 0, атрибут muted — с 5. Opera: 1. 1. 5i. OS Safari: 3. Android Browser: 2. Chrome for Android: 4. В простом варианте HTML- разметка для размещения видеофайла на странице имеет следующий вид: < video src=. Вы можете добавить изображение с помощью атрибута poster, которое браузер будет использовать, пока загружается видео или пока пользователь не нажмет на кнопку воспроизведения, а также задать высоту и ширину видео. Как и в случае с аудиофайлами, рекомендуется перечислять в < source> все форматы, начиная с более предпочтительного. Также нужно указывать MIME- тип для каждого видеофайла.< video controls width=. Атрибуты тега < video> Атрибут. Описание, принимаемое значениеautoplay. Автоматическое воспроизведение видеоофайла сразу же после загрузки страницы. Указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением (воспроизведение, пауза, громкость). Задает высоту окна для отображения видеоданных, возможные значения: px или %loop. Циклическое воспроизведение видеофайла. Выключает звук при воспроизведении видеофайла. URL файла изображения, которое будет отображаться во время загрузки видеофайла или до тех пор, пока пользователь не нажмет на кнопку PLAY. Если атрибут не задан, то будет отображаться первый кадр видеофайла. Атрибут, отвечающий за предварительную загрузку видеоконтента. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения: auto — браузер загружает видеофайл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение. Содержит абсолютный или относительный URL- адрес видеофайла. Задает ширину окна для отображения видеоданных, возможные значения: px или %2. Встраиваемый интерактивный контент. Элемент < embed> определяет контейнер для внешнего приложения или интерактивного содержимого (другими словами, плагина). Большинство браузеров поддерживало данный элемент на протяжении долгого времени. Тем не менее, данный тег не был включен в спецификацию HTML4, его добавили в спецификацию HTML5. С помощью < embed> на веб- страницы можно добавлять не только видеофайлы, но и векторные изображения в формате swf: < embed src=. Атрибуты тега < embed> Атрибут. Описание, принимаемое значениеheight. Определяет высоту встраиваемого контента в px или %. Содержит абсолютный или относительный URL- адрес медиафайла. Определяет MIME- тип встраиваемого файла. Определяет ширину встраиваемого контента в px или %. Видеокодеки. При просмотре видео проигрыватель должен его декодировать. Одни проигрыватели используют программное декодирование видеопотока, другие используют аппаратное декодирование. Важно! Поскольку каждый браузер поддерживает определенный кодек, поэтому, чтобы обеспечить воспроизведение видео- контента во всех браузерах, видео- файл нужно размещать в нескольких форматах. H. 2. 64 — высококачественный кодек от фирмы MPEG, делится на профили для поддержки как устройств с минимальными возможностями, так и устройств высокого разрешения. Ogg Theora — открытый бесплатный стандарт для видео, качество и производительность несколько ниже стандарта H. VP8 — открытый бесплатный кодек, сходный по качеству с H. Поддерживается в Firefox, Chrome и Opera. Видеоконтейнеры. Рис. Видеоконтейнер. Любой видеофайл является файловым контейнером, в котором хранятся другие файлы. Аудио- и видеодорожки объединяются для воспроизведения видеоролика. Метаданные содержат информацию о данном видеоролике — изображение обложки, субтитры и пр. К популярным форматам видеоконтейнеров относятся следующие: Ogg (. Theora и аудио Vorbis. Работает в Firefox, Chrome и Opera. MIME- тип: video/ogg. MPEG 4 (. mp. 4) — формат- контейнер для видеокодека H. AAC. Работает в Safari и Chrome. Кодирует видео, в том числе высокой четкости, для полного спектра устройств, таких как i. Phone, i. Pod и i. Pad. MIME- тип: video/mp. Web. M (. webm) — формат- контейнер с открытым исходным кодом для видеокодека VP8 от Google и аудиокодека Ogg Vorbis. Работает в Firefox, Chrome, Opera и Adobe Flash Player. MIME- тип: video/webm. Audio Video Interleave (. RIFF. MIME- тип: video/vnd. Matroska (. mkv) — популярный видеоконтейнер, может содержать видео в формате H. VP8 или Theora. MIME- тип: video/x- matroska, audio/x- matroska. На данный момент браузеры поддерживают три основных видео формата: Формат. Видеокодек. Аудиокодек. H. 2. 64. AAC. ogg/. Theora. Vorbis. webm. VP8. Vorbis. Видео в формате . HTML5 не воспроизводится. Поэтому его необходимо перекодировать в эти три формата с соответствующими видео и аудиокодеками для вывода на сайте. Для этого можно использовать видеоконвертеры, указанные на странице ниже. Чтобы убедиться, что браузер умеет обрабатывать видеофайлы, нужно создать файл . MIME- типы для видео: Add. Type video/ogg . ogv. Add. Type video/mp. Add. Type video/webm . Несмотря на то, что HTML5- видео поддерживается современными браузерами, тем не менее для Internet Explorer (9+) и Safari требуются установленные плагины Microsoft Media Player и Apple Quick. Time соответственно. Альтернативные медиа- ресурсы. Элемент < source> используется для указания нескольких медиа- ресурсов для < audio> и < video>. Добавляет альтернативные видео/аудио файлы, которые браузер может выбрать из предложенных на основании поддерживаемого им типа носителя или кодека. Таблица 3. Атрибуты тега < source> Атрибут. Описание, принимаемое значениеmedia. Определяет тип медиа- устройства (т. Добавление субтитров и заголовков. Элемент < track> используется в качестве дочернего элемента < audio> и < video>. Добавляет текстовую дорожку для субтитров, заголовков медиафайлов или другой текстовой информации, которая должна быть видна во время воспроизведения медиа- ресурса. Таблица 4. Атрибуты тега < track> Атрибут. Описание, принимаемое значениеdefault. Указывает, что данная дорожка воспроизводится по умолчанию. Только один элемент < track> может содержать данный атрибут. Указывает тип текстовой дорожки, по умолчанию выводятся субтитры (subtitles). Принимаемые значения: captions — перевод диалогов и звуковых эффектов, отображаемый в виде текста поверх видео (для глухих пользователей). Если этот атрибут не задан, браузер применит значение по умолчанию. Содержит абсолютный или относительный URL- адрес аудио- или видеофайла. Язык воспроизводимой дорожки. Пример: размещаем видео на сайте. Декодируем видео в три файла с соответствующими видео и аудиокодеками: для . H. 2. 64/AAC,для . VP8/Vorbis,для . ogv — Theora/Vorbis. Добавляем поддержку MIME- типов в файл . Размещаем код для вставки видео на сайт с помощью HTML5- разметки, используя атрибуты для задания видео требуемых параметров: < video controls width=. Если вы хотите выровнять видеоплеер на странице, нужно обернуть элемент < video> в контейнер < div> с присвоенным классом, для которого задаются ширина и высота, соответствующие размерам вашего видео. Далее, с помощью css- свойств можно задать отступы, выравнивание на странице и т. Видеоконвертеры. Movavi — позволяет конвертировать видео и аудио в необходимый вам формат. Сохраняет медиафайлы для проигрывания на мобильных устройствах. Работает непосредственно в браузере, но вся работа выполняется локально без обращения к веб- серверу.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
March 2018
Categories |