1. 相关知识介绍
在HTML中，我们可以通过添加video元素来嵌入视频。video元素是HTML5新添加的元素，用于在Web页面中直接嵌入视频文件。通过添加video元素，我们可以轻松地在Web页面上播放视频文件。
video元素最早于2007年出现在HTML5草案中，用于在Web页面上嵌入视频和音频文件。目前，所有主流的Web浏览器都支持video元素，包括Chrome、Firefox、Safari、Edge等。
2. 添加video元素
要在HTML页面上添加video元素，我们只需要使用video标签，并将视频文件的路径指定为它的source子标签即可。下面是一个简单的示例，展示如何嵌入视频文件：
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
在这个示例中，我们使用了video标签来创建一个新的视频元素，并使用source子标签来指定视频文件的路径和类型。controls属性指定了页面上显示视频播放器的控制条。
在source子标签中，我们需要指定视频文件的路径和类型。在这个例子中，视频文件的路径是"video.mp4"，类型为"video/mp4"。如果我们的视频文件类型不同，我们需要相应地更改type属性的值，例如：
<video controls>
<source src="video.webm" type="video/webm">
</video>
在这个示例中，我们指定了另一个视频文件"video.webm"，并将其类型指定为"video/webm"。
3. video元素的属性
3.1 controls
controls属性用于指定是否在页面上显示视频播放器的控制条。如果设置了controls属性，那么页面上将显示播放器的控制条，包括播放、暂停、快进、快退等按钮。
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
3.2 autoplay
autoplay属性用于指定视频是否自动播放。如果设置了autoplay属性，那么视频将自动开始播放。
<video autoplay>
<source src="video.mp4" type="video/mp4">
</video>
3.3 loop
loop属性用于指定视频是否循环播放。如果设置了loop属性，那么视频将在播放结束后重新开始播放。
<video loop>
<source src="video.mp4" type="video/mp4">
</video>
3.4 poster
poster属性用于指定视频播放前显示的图片。如果给poster属性指定了一个图片路径，那么在视频加载前，该图片将显示在页面上。
<video poster="poster.jpg">
<source src="video.mp4" type="video/mp4">
</video>
4. 其他播放视频的方法
4.1 使用iframe
如果我们的视频不是存储在本地，而是嵌入在其他网站上，我们可以使用iframe来嵌入视频。使用iframe可以将其他网站的视频嵌入到我们的Web页面中。
<iframe src="http://www.youtube.com/embed/VIDEO_ID"></iframe>
在这个示例中，我们使用iframe标签来嵌入YouTube视频。只需将视频的URL链接嵌入到src属性中，即可嵌入外部视频。
4.2 使用JavaScript库
除了使用HTML5的video元素外，我们还可以使用一些JavaScript库来播放视频。这些库提供了更多的功能和定制选项，例如视频播放列表、自定义控制条等。
其中一个广受欢迎的JavaScript库是Video.js。Video.js是一个开源的HTML5视频播放器，可以轻松地在Web页面上嵌入视频。使用Video.js，我们可以定制视频播放器的外观和行为，实现更加丰富的视频体验。
5. 总结
在本文中，我们介绍了如何在HTML页面中添加视频，以及视频元素的常用属性。我们还介绍了一些其他播放视频的方法，例如使用iframe和JavaScript库。在实际开发中，我们可以根据不同的需求和场景来选择不同的视频播放方式，以实现更好的用户体验。