Добавление элемента управления видео HTML5 на веб-страницу

В Windows Internet Explorer 9 была введена поддержка видео HTML5.Элемент видео HTML5 позволяет разместить на веб-странице полнофункциональный видеопроигрыватель без использования подключаемого модуля сторонней разработки. Не требуется даже код JavaScript.

С чего начать?

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

Элемент HTML5 имеет следующий синтаксис:


<video src="demo.mp4" controls autoplay >HTML5 Video is required for this example</video> 


В этом примере с помощью одной строки кода выполняется несколько операций. Атрибут src указывает видеофайл для воспроизведения. Атрибут src служит одним из двух способов задания содержимого для элемента video. Чтобы воспроизвести видео, присвойте атрибуту src URL-адрес видеофайла.

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

Наконец, атрибут autoplay имеет логическое значение и включает автоматическое воспроизведение видео сразу после загрузки.

Какие атрибуты можно использовать с элементом video?

Элемент video поддерживает ряд атрибутов, управляющих воспроизведением и отображением видео. В таблице представлены основные атрибуты видео. Для логических атрибутов присутствие в элементе video соответствует значению "true", а отсутствие — значению "false".

АтрибутОписание
src Строка, представляющая URL-адрес, который указывает на видеофайл.
controls Логический атрибут, включающий набор встроенных элементов управления воспроизведением. Обычно в этот набор входят элементы для воспроизведения, паузы, поиска и установки громкости. В Internet Explorer 10 также отображается элемент управления для выбора нескольких звуковых и текстовых дорожек.
poster Строка, представляющая изображение-заполнитель, которое отображается в видеопроигрывателе. Афиша отображается, только если видео недоступно (когда источник еще не задан или продолжается загрузка содержимого).
loop Логический атрибут, повторяющий воспроизведение видео, пока не будет нажата кнопка "Пауза" в ряду элементов управления или не будет вызван метод pause из сценария.
muted Логический атрибут, воспроизводящий видео с отключенной звуковой дорожкой.
autoplay Логический атрибут, автоматически начинающий воспроизведение видео, когда в буфере проигрывателя оказывается достаточно содержимого.
preload Логический атрибут, который определяет подсказку о необходимом объеме буферизации.
height Задает высоту видеопроигрывателя в пикселях.
width Задает ширину видеопроигрывателя в пикселях.

 

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

В следующем примере до загрузки содержимого отображается афиша, а затем видео многократно воспроизводится с отображением элементов управления.


<video src="demo.mp4" controls autoplay loop muted preload="auto" poster="demo.jpg" >
HTML5 Video is required for this example
</video> 


Описанные выше атрибуты можно задавать в элементах video в HTML, но при использовании JavaScript открывается множество других возможностей. Дополнительные сведения см. в разделе Использование JavaScript для управления видеопроигрывателем HTML5.

Как обеспечить поддержку нескольких форматов?

Элемент video позволяет задать только один атрибут src. Это удобно, если известно, что будет использоваться только один формат файлов. Чтобы обеспечить поддержку нескольких форматов файлов и других браузеров, можно использовать элемент source.

Элемент source вместе с элементом video подбирает наилучшее сочетание для формата видеоматериала. Это значит, что можно назначить несколько форматов, а видеопроигрыватель HTML5 выберет наиболее подходящий. Обычно это MP4-файл для Windows Internet Explorer или формат OGG/OGV для некоторых других браузеров. В этом примере показан элемент video с тремя возможными форматами файлов:


 <video controls poster="demo.jpg">
   <source src="demo.mp4" type="video/mp4" />
   <source src="demo.webm" type="video/webm"/>
   <source src="demo.ogv" type="video/ogg"/>             
   <p>Fallback code if video isn't supported</p>/
 </video>


В примере указаны три формата видео — MP4, WebM и OGG. Элемент video выбирает формат, который может воспроизводиться браузером. Если не удается воспроизвести ни один формат или видео HTML5 не поддерживается, то вместо видео отображается текст, заключенный в тегах video. Эту особенность можно использовать для отображения сообщения или включения встроенного проигрывателя.

Что происходит в старых браузерах?

Добавление на веб-страницу видео без подключаемых модулей и внешних проигрывателей удобно для пользователей браузеров Internet Explorer 9 или Internet Explorer 10 с новым интерфейсом Windows, а также для пользователей мобильных устройств, которые не поддерживают подключаемые модули. Однако в таком случае ваша аудитория будет ограничена пользователями, использующими современные браузеры. Элементы video и audio в HTML5 позволяют размещать между тегами текст или код, который будет выполняться, только если браузер пользователя не поддерживает HTML5.

Примечание  Элементы audio и video отличаются от элемента canvas, и код между элементами выполняется, только если эти элементы не поддерживаются. В случае canvas код между тегами не отображается, но выполняется при поддержке canvas. Модель Canvas Shadow DOM позволяет разработчикам обеспечивать поддержку специальных возможностей для устройств чтения с экрана и других устройств. Дополнительные сведения см. в разделе Элемент canvas HTML5 и модель Canvas Shadow DOM.

Следующий пример аналогичен предыдущему, но добавляется тег object для запуска проигрывателя Adobe Flash, поддерживающего браузеры прежних версий.


 <video controls poster="demo.jpg">
   <source src="demo.mp4" type="video/mp4" />
   <source src="demo.webm" type="video/webm"/>
   <source src="demo.ogv" type="video/ogg"/>     
   <object>
     <embed src="demo.mp4" type= "application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="always" />
   </object>        
   HTML5 Video is required for this example
 </video>


В этом примере, если браузер поддерживает видео HTML5, то последовательно проверяется возможность воспроизведения представленных форматов видео. Если видео HTML5 не поддерживается, то загружается проигрыватель Flash с помощью тегов object и embed.

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


HTML5 Video is required for this example. 
<a href="demo.mp4">Download the video</a> file. 


Подробнее о резервных решениях для приложений Магазина Windows на JavaScript см. в разделе Подключаемые модули и элементы ActiveX.

Как добавить стиль?

Для видеопроигрывателя HTML5 можно задать стиль с помощью CSS, чтобы вписать его в общий вид веб-страницы. С помощью CSS можно задавать свойства height и width, задавать фон, границы и position, а также управлять свойством visibility элементов video.

Свойство CSS z-index позволяет перекрывать элемент video изображениями, текстом и даже другими видео. Примером перекрытия служит функция "картинка в картинке" (PiP), когда на одном экране маленькое видео располагается поверх большого.

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


    <style type="text/css">       
    #Video1
    {
     position:absolute;
     top: 50px;
     left:0px;        
     width:1000px;       
     border:2px solid blue;
     display:block;
     z-index:99;
     }
        
   #Video2
    {
     position:absolute;
     top:80px;
     left:60px;
     width:300px;
     border:2px solid red;        
     z-index:100;
    }
    
    </style>
</head>
    <body>        
       <video id="Video1" controls loop autoplay >
           <source src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" type="video/mp4" />           
       </video>
       
       <video id="Video2" muted autoplay controls >
           <source src="http://ie.microsoft.com/testdrive/Videos/BehindIE9AllAroundFast/video.mp4" type="video/mp4" />
           HTML5 Video not supported
       </video>             


Свойство z-index позволяет менять порядок отображения. Обычно элементы на веб-странице отображаются в том порядке, в котором они были созданы. Если один элемент перекрывает другой, то полностью видимым будет тот, который рисовался последним. Для второго видеокадра устанавливается значение 100 свойства z-index. Это гарантирует, что второй видеокадр всегда будет располагаться поверх остальных (предполагая, что перед видео создано не более 100 элементов). Расположение второго видеокадра определяется с учетом размера воспроизводимых видео и количества элементов на странице.

Можно использовать и другие свойства CSS, например свойство transform для поворота изображения или свойство borderRadius для создания закругленных углов элемента video, как показано в следующем примере. Дополнительные сведения см. на страницах справочника по каскадным таблицам стилей (CSS).


<html>
  <head>
    <title>Rotating a video</title>
    <style type="text/css">
   /* Set basic style for video */     
    #theVideo  
   {
        display:block;
        position:absolute;
        left:200px;
        top:200px;
        border: 2px solid red;
        border-radius: 20px;  
    }   
    /* Light up the image as a button, change cursor */
    #rotateVideo:hover
    {
        border:2px solid green;
        cursor: pointer;                
     }
        
    </style>
    <script>
        //  When the HTML elements load, call init()
        document.addEventListener("DOMContentLoaded", init, false);
       
        //  Rotate the video by 30degrees when image is clicked
        function init() {
          var video = document.getElementById("theVideo");
          if (video) {
            var rotateVal = 0;       //  Global variable to hold current rotation value
            document.getElementById("rotateVideo").addEventListener("click", function () {
              rotateVal = (rotateVal += 30) % 360;  // Calculate the next value, but keep between 0 and 360
              var temp = "rotate(" + rotateVal + "deg)"; // Create a style string
              document.getElementById("theVideo").style.msTransform = temp;  // Set the style
            }, false);
          }
        }
    </script>
   
  </head>
  <body>
    <img src="rotate.png" id="rotateVideo" alt="Rotate button" title="Click to rotate 30 degrees" role="button"/>
    <video src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" id="theVideo" controls >
      This browser or mode doesn't support HTML5 video.
    </video>
  </body>
</html>


Что дальше?

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

В разделе Использование JavaScript для управления видеопроигрывателем HTML5 вы узнаете, как использовать JavaScript для добавления внешних элементов управления для воспроизведения, как проверить совместимость форматов файлов и как управлять громкостью и скоростью воспроизведения.

Справочник по API

HTML5 Audio and Video

Примеры и учебники

Использование JavaScript для управления видеопроигрывателем HTML5
Использование событий видео HTML5
Пример синхронизированной текстовой дорожки HTML5
Создание видеороликов с возможностью включения синхронизированных текстовых дорожек

Демонстрационные версии тестовых выпусков Internet Explorer

Город видео
Средство создания титров для видео HTML5
Титры для видео в IE10
Поддержка формата видео
Калейдоскоп видео
Видеопанорама IMDb

Записи блога IEBlog

HTML5 и интернет-видео: вопросы к отрасли от сообщества
Титры для видео в HTML5

Спецификация

HTML5: раздел 4.8.6

Связанные разделы

Вставка видео с помощью HTML5
Воспроизведение видео HTML5 на мобильных устройствах

 

 

Показ:
© 2015 Microsoft