随着互联网技术的发展，越来越多的网站开始使用视频来展示内容。对于网站开发者来说，如何在网页中添加视频并让视频正常播放，是一个较为常见的问题。本文将介绍html中如何添加、播放和控制视频。
一、HTML5 中的 Video 标签
在 HTML5 中添加视频的方法是在 HTML 代码中添加视频标记。具体来说，使用如下标记:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>这段代码中，“src”属性用来定义视频文件的 URL，如上代码中的“movie.mp4”和“movie.ogg”分别表示视频的 MP4 和 OGG 格式。如果浏览器支持视频播放，将会选择其中一个播放，如果都不支持，就会显示最后一个标签内的内容“Your browser does not support the video tag.”。
其中，“width” 和 “height” 可以用来指定视频的宽高大小。controls 属性用于添加视频播放器的控制条。
立即学习“前端免费学习笔记（深入）”；
二、控制视频播放
添加视频后，我们可以通过以下代码对视频进行控制：
var video = document.getElementsByTagName("video")[0];
video.play(); //播放
video.pause(); //暂停
video.currentTime = 0; //设置当前时间为 0 秒
video.volume = 0.5; //设置音量为一半其中，“play()”和“pause()”函数分别用于播放和暂停视频，currentTime 属性用于设置视频播放的当前时间，volume 属性用于设置视频的音量大小。
三、支持多种格式的视频文件
为了让更多的浏览器都能支持视频播放，可以采用多种格式的视频文件，同时提供多个 sources。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>这里针对不同的浏览器和操作系统提供了三种不同的格式，尽量确保视频覆盖面的广度。
四、视频预加载选项
HTML5 中的视频标签还提供了 preload 属性，可以选择在页面加载的时候预先下载视频，以免出现视频卡顿的情况。
支持 preload 属性的值有三种：
- preload = "none" ：不预先下载。
- preload = "metadata" ：下载视频的元数据，例如：视频时长、音轨等信息。
- preload = "auto" ：下载整个视频文件。
当 preload 属性赋值为 “auto” 时，视频将在页面加载过程中进行下载，这时候可以通过 JavaScript 获取视频的加载状态。
var video = document.getElementsByTagName("video")[0];
video.load(); //下载整个视频文件
console.log(video.buffered.end(0)); //输出已下载部分五、网页中使用 YouTube 视频
除了通过视频标签直接嵌入视频文件之外，还可以通过嵌入 YouTube 视频的方式进行视频播放。具体实现方式如下：
- 首先需要在 YouTube 上找到要嵌入的视频。
- 在页面中添加以下 HTML 代码：
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
ps：此处的“VIDEO_ID” 是该视频的唯一标识符。
- 然后按照标准的方式来进行 CSS 样式的调整。
六、浏览器兼容性
HTML5 中添加视频的方法，在现代浏览器中，已经得到了广泛的支持，但还有一些较老的浏览器存在不支持 HTML5 视频的问题。这些浏览器可以通过 JavaScript 和 Flash 来支持视频播放。
- 通过 JavaScript：可以使用库如 video.js 或 JWPlayer。
- 通过 Flash：通过 swfobject 和 swfmedia 在页面中嵌入 Flash 播放器，再加载视频。
总结
本文介绍了 HTML 中如何添加、播放和控制视频，并对常用的一些播放特性进行了介绍。在实际开发过程中，开发者应注意兼容性问题，提供多种不同格式的视频文件，确保每个浏览器都能完美支持视频播放。
