介绍
如果你想在网页上添加视频，HTML提供了多种方法可以实现。 您可以使用视频标签（`<video>`），以及其他外部JavaScript和APIs等。 在本文中，我们将重点讨论使用HTML视频标签（`<video>`）嵌入视频文件。
使用video标签将视频添加到HTML
在HTML中添加视频很简单，只需在代码中添加一些元素，就可以轻松地将视频添加到您的网页上。 首先，我们需要做的是将视频存储在网页可以访问到的位置。 可以将其存储在同一目录下，也可以将其存储在其他位置并使用绝对路径或相对路径进行访问。
HTML代码
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
要将视频添加到HTML，我们需要使用`<video>`元素以及要添加的视频文件的路径。在此示例中，我们添加了两个源`<source>` 元素，一个MP4文件，另一个是Ogg文件。如果您不需要Ogg格式的视频，您可以使用一个MP4源。 如果浏览器不支持`<video>`元素，则显示文本“您的浏览器不支持视频标签。”
在video元素中使用其他属性
使用`<video>`元素时，您还可以添加其他属性以控制视频的外观和行为。 在下面的示例中，我们将视频宽度设置为800像素，高度设置为450像素，并为视频添加了自动播放，循环播放和隐藏控件。
HTML代码
<video width="800" height="450" autoplay loop controls="false">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
控制视频的功能按钮
默认情况下，包含`<video>`元素的网页上将显示一些功能按钮，例如播放控件，调整音量的滑块和全屏按钮。您可以使用下面的属性完全控制这些按钮是否显示
`controls` - 显示所有功能按钮
`controls="false"` - 隐藏所有功能按钮
`controls="controls"` - 显示所有功能按钮
视频格式
在添加视频时，请注意运行视频文件的格式。大多数浏览器都支持以下视频格式：
MP4
OGG
WebM
使用video.js播放视频
`video.js`是一个流行的JavaScript库，可帮助在浏览器中播放视频。 它是一个自由，开源项目，它为您提供了更多控制您的视听体验的功能。该库支持的格式与HTML5 `<video>`元素相同。
HTML代码
<link href="//vjs.zencdn.net/4.11/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.11/video.js"></script>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="360"
poster='my_video_poster.png'
data-setup='{ "techOrder": ["html5", "flash"], "flash": { "swf": "video-js.swf" } }'>
<source src="video.mp4" type="video/mp4">
</video>
</body>
</html>
如上所述，使用`video.js`库需要您链接到`video.js`和`video-js.css`文件。此外，您还可以为视频设置其他功能，例如自定义控件和预加载。 此外，您还可以设置您的视频以在移动设备上正确工作。