如何在 HTML5 中添加视频？

在 HTML5 中添加视频非常方便，只需要使用 <video> 标签即可。下面介绍如何添加视频，并设置相关属性。

1. 添加视频

使用 <video> 标签添加视频，只需要在 HTML 页面中插入一段代码即可：

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

其中 src 属性指定视频文件的路径。

2. 添加视频预览图

为了增强用户体验，我们可以添加视频预览图。只需要在 <video> 标签中添加 poster 属性，指定预览图文件的路径即可：

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

3. 设置视频大小

默认情况下，视频的大小会根据浏览器窗口大小自适应。如果需要设置视频的大小，可以使用 CSS 样式来控制。

<video src="movie.mp4" style="width: 640px; height: 360px;"></video>

4. 控制视频播放

我们可以使用 JavaScript 来控制视频的播放，暂停等操作。首先需要为 <video> 标签添加 id 属性：

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

然后在 JavaScript 中获取该元素，并调用相应的方法：

var video = document.getElementById("myVideo");
video.play(); // 播放视频
video.pause(); // 暂停视频

5. 支持多种视频格式

为了兼容不同的浏览器和设备，我们需要提供多种视频格式。可以使用以下代码来指定多种格式的视频：

<video>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
</video>

其中 <source> 标签用于指定不同格式的视频。

6. 添加视频控制条

添加视频控制条能够更好地提升用户体验。只需要在 <video> 标签中添加 controls 属性即可：

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

7. 自动播放视频

在某些场合下需要自动播放视频，可以在 <video> 标签中添加 autoplay 属性：

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

这样视频将在页面加载完毕后自动播放。

8. 循环播放视频

如果需要循环播放视频，可以在 <video> 标签中添加 loop 属性：

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

总结

以上就是如何在 HTML5 中添加视频的方法，可以自由控制大小，视频播放，格式转化等等。