HTML5 video

У нас есть простой тег HTML <video> для просмотра видео. Теперь нам надо сделать так, чтобы видео, было совместимо с браузерами и сделать закладки на эпизоды видео-файла. В этой статье подробно описано как это сделать.

В документе HTML5, видео выводится вот так:



<video src=
http://pixelcom.crimea.ua/"sample.mp4" id="movie" controls height="360" />


для того что бы все современные браузеры воспроизводили видео HTML5, нужно написать вот такой код:



<video id="movie" preload controls>
    <source src=
http://pixelcom.crimea.ua/"sample.mp4" />
    <source src=
http://pixelcom.crimea.ua/"pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
    <source src=
http://pixelcom.crimea.ua/"sample.ogv" type='video/ogg; codecs="theora, vorbis"' />
  </video>


Должны быть подключены все три формата видео HTML5, если нет хотя бы одного формата, значить видео HTML5 будет воспроизводиться не во всех современных браузерах.

Добавление закладок в видео

Добавление функциональности для видео HTML5 требует использование JavaScript. Одна из вещей, которую мы могли бы добавить к видео HTML5, чтобы оживить наш сайт, это “bookmarks” (закладка). Это ссылки на эпизоды видео, пользователь может перейти к этому месту просто нажав на ссылку. Для этого требуется добавить на странице 2 вещи: список закладок, которые пользователь может выбрать, и необходимые для перехода JavaScript на закладку в раздел нашего видео.

Во-первых, давайте добавим список наших эпизодов в видео. Где-то после </video> и перед </body> , добавьте:



<section id="bookmarks">
   <h2>Воспроизвести эпизод:</h2>
   <ul>
      <li><a href=
http://pixelcom.crimea.ua/"#" onClick="PlayFromBookmark('ask-a-ninja');" >Задание Ниндзя</a></li>
      <li><a href=
http://pixelcom.crimea.ua/"#" onClick="PlayFromBookmark('jeffrey-rayport');" >Объект ликвидации</a></li>
      <li><a href=
http://pixelcom.crimea.ua/"#" onClick="PlayFromBookmark('beth-dover');" >План отхода</a></li>
   </ul>
</section>


тег <section> новый элемент HTML5. Он может быть использован вместо тега <div> , смотрите подробности новые элементы HTML 5

Здесь мы определили три закладки, для перехода на эпизоды видео. В зависимости от вашего видео, вы можете определить больше или меньше закладок.

Обратите внимание, мы определили функцию OnClick вызывается « PlayFromBookmark () «, которая принимает в качестве параметра кнопки закладки. Теперь нам нужно определить эту функцию PlayFromBookmark () .

Где-то между <head> и </ head> , мы должны вставить JavaScript:



<script>
   function PlayFromBookmark(label) {
      var video_player = document.getElementById("movie");
      switch (label) {
         default: video_player.currentTime = 0;
         case "ask-a-ninja": video_player.currentTime = 39;
         case "jeffrey-rayport": video_player.currentTime = 27;
         case "beth-dover": video_player.currentTime = 31;
      }
      video_player.play();
   }
  </script>


Эта функция изменяет video_players текущее время в зависимости от нажатия на ссылку. Затем, воспроизводится видео из текущего времени.

Откройте файл и проверяйте в действии.

Заключение

На самом деле это очень полезная функция в HTML5 video, пользователь может выбрать что смотреть а что нет. Рекомендую почитать еще про одну очень полезную функцию для HTML5 video это титры для видео HTML5 .

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>