Cодержание

Руководство HTML Video

View more Tutorials:

1- HTML Video

Тег  <video> был введен в  HTML5, он помогает вам встроить video в web страницу. HTML4 на самом деле не имеет специальный тег для video, чтобы встроить video, HTML4 использует тег  <embed> или  <object> или  <iframe> одновременно нужно установить дополнительное программное обеспечение, например  Flash или  QuickTime.
С тегом  <video> встроить video на web странице становится проще, и вам не нужно устанавливать никакие дополнительные программные обеспечения в браузер. Почти все браузеры поддерживают  HTML5, поэтому они так же поддерживают тег  <video>.
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">

  Your browser does not support the video tag.

</video>
Атрибут  controls говорит браузеру отобразить элементы управления video, например кнопку play, кнопку паузы, звука,..
Тег  <source> появляется в теге  <video> предоставляет альтернативный ресурс video для браузера. Браузер может использовать один из предоставленных ресурсов video поочередность идет сверху вниз.
Текстовое содержание в теге  <video> отображается только если браузер не поддерживает тег  <video> или не поддерживает никакие форматы video предоставленных тегами  <source>.
video-example.html
<!DOCTYPE html>
<html>

<head>
    <title>Video</title>
    <meta charset="UTF-8">
</head>
<body>
    <h3>Video example:</h3>

    <video width="320" height="240" controls>
      <source src="../resources/mov_bbb.mp4" type="video/mp4">
      <source src="../resources/mov_bbb.ogg" type="video/ogg">

      Your browser does not support the video or formats.

    </video>

</body>
</html>
Браузеры и поддержка разных форматов video:
Browser MP4
(video/mp4)
WebM
(video/webm)
Ogg
(video/ogg)
Internet Explorer 16x16    
Chrome 16x16 16x16 16x16
Firefox 16x16 16x16 16x16
Safari 16x16    
Opera 16x16
(>= 25)
16x16 16x16

2- Video Attributes

Как и все другие элементы (element), элемент  <video> поддерживает все глобальные атрибуты (global attributes).
  • TODO Link!
Помимо этого имеются другие атрибуты ниже:
  • src
  • controls
  • autoplay
  • buffered
  • crossorigin
  • currentTime
  • duration (Read only)
  • height
  • width
  • loop
  • muted
  • playsinline
  • poster
  • preload

View more Tutorials: