HTML5视频教程

HTML5是最新的HTML标准，它提供了许多新的功能和特性，其中之一就是视频播放，在HTML5中，我们可以使用<video>标签来嵌入视频，而不需要依赖任何第三方插件，本教程将详细介绍如何使用HTML5的<video>标签来播放视频。

1、基本语法

我们需要了解<video>标签的基本语法，<video>标签有一个controls属性，当设置为true时，浏览器会显示视频控制器，包括播放/暂停按钮、音量控制等，我们还可以设置视频的宽度和高度，以及视频的来源。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持Video标签。
</video>

在上面的例子中，我们设置了视频的宽度为320像素，高度为240像素，并添加了控制器，我们提供了两种不同的视频源，一种是MP4格式，另一种是OGG格式，如果浏览器不支持这两种格式，那么将显示一条消息。

2、自动播放

默认情况下，<video>标签的视频不会自动播放，如果我们希望视频在页面加载时自动播放，我们可以添加一个autoplay属性，由于某些原因（如用户体验和隐私问题），大多数浏览器都不允许自动播放视频，我们需要确保用户已经与页面进行了交互，然后再开始播放视频。

<video id="myVideo" width="320" height="240" controls autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持Video标签。
</video>

<script>
var video = document.getElementById("myVideo");
video.addEventListener('canplay', function() {
  video.play();
});
</script>

在上面的例子中，我们首先创建了一个<video>标签，并添加了autoplay属性，我们使用JavaScript监听canplay事件，当视频可以播放时，调用play()方法开始播放视频，我们就可以确保只有在用户与页面交互后，视频才会开始播放。

3、循环播放

如果我们希望视频在播放结束后自动重新开始播放，我们可以添加一个loop属性，当设置为true时，视频将在结束前一直循环播放。

<video id="myVideo" width="320" height="240" controls loop>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持Video标签。
</video>

在上面的例子中，我们添加了loop属性，使视频在播放结束后自动重新开始播放。

HTML5的<video>标签为我们提供了一种简单的方式来嵌入和播放视频，通过设置各种属性和事件，我们可以实现更复杂的功能，如自动播放、循环播放等，我们也需要注意一些浏览器的限制和兼容性问题。