HTML5 Video：完整教程

一、 HTML5 Video 概述

HTML5 视频的出现，使得网页在视觉效果上更加炫丽，也让网页的内容更加生动形象。通过 HTML5 Video 标签，我们可以在网页上插入各种格式的视频，而不需要任何插件。

HTML5 Video 是 HTML5 中引入的新标签，并且受到了广泛的支持。除了 Chrome、Firefox 等网页浏览器，它还可以在移动设备上，如 iPhone、Android、Windows Phone 上的浏览器播放。

二、使用 HTML5 Video 标签

要使用 HTML5 Video 标签，我们需要了解以下几个属性：

<video src="movie.mp4"></video>

在上面的例子中，我们使用了 src 属性来新建一个视频标签。请注意，src 属性用来定义视频的路径及文件名。如果浏览器支持该视频格式，则会自动加载和播放视频。

除了 src 属性外，还有其他重要的属性：

1. width 和 height

width 和 height 属性用于定义视频播放器的宽度和高度，以像素为单位。

<video width="400" height="300" src="movie.mp4"></video>

2. controls

如果设置了 control 属性，浏览器会自动添加视频控件，包括播放/暂停、音量和进度条。

<video src="movie.mp4" controls></video>

3. autoplay

autoplay 属性用于在网页加载后自动播放视频。

<video src="movie.mp4" autoplay></video>

4. loop

loop 属性用于指定视频播放结束后是否重复播放。

<video src="movie.mp4" loop></video>

5. poster

poster 属性用来设置播放器封面，即在播放器加载完成前显示给用户的图片。

<video src="movie.mp4" poster="posterimage.jpg"></video>

三、多种格式的视频

在使用 HTML5 Video 标签时，我们需要考虑浏览器的支持情况。不同的浏览器支持的视频格式不同，我们需要提供多种格式的视频来达到最佳效果。

我们可以使用以下文件类型：

• MP4
• WebM
• Ogg

为了兼容不同的浏览器，我们可以这样写：

<video>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogv" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

四、HTML5 Video 事件

HTML5 Video 还有一些内置的事件，我们可以利用这些事件来控制视频的播放。

1. play()

play() 事件在用户开始播放视频时触发。

<video id="myVideo" src="movie.mp4"></video>

<script>
  var vid = document.getElementById("myVideo");
  vid.play();
</script>

2. pause()

pause() 事件在用户暂停视频时触发。

<video id="myVideo" src="movie.mp4"></video>

<script>
  var vid = document.getElementById("myVideo");
  vid.pause();
</script>

3. ended()

ended() 事件在视频播放结束时触发。

<video id="myVideo" src="movie.mp4"></video>

<script>
  var vid = document.getElementById("myVideo");
  vid.onended = function() {
    alert("The video has ended");
  };
</script>

4. timeupdate()

timeupdate() 事件在视频的当前播放时间发生变化时触发。

<video id="myVideo" src="movie.mp4"></video>

<script>
  var vid = document.getElementById("myVideo");
  vid.ontimeupdate = function() {
    alert("The current playback position is " + vid.currentTime);
  };
</script>

五、结论

HTML5 Video 是网页制作中必不可少的一部分，它可以使网页更加生动形象，同时也可以提高用户的体验。通过学习本文的内容，您现在已经拥有了 HTML5 Video 的完整教程，赶紧动手试试吧！