HTML中如何添加、播放和控制视频

随着互联网技术的发展，越来越多的网站开始使用视频来展示内容。对于网站开发者来说，如何在网页中添加视频并让视频正常播放，是一个较为常见的问题。本文将介绍HTML中如何添加、播放和控制视频。

一、HTML5 中的 Video 标签

在 HTML5 中添加视频的方法是在 HTML 代码中添加视频标记。具体来说，使用如下标记:

<video width="320" height="240" controls>
  <source class="lazy" data-src="movie.mp4" type="video/mp4">
  <source class="lazy" data-src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

这段代码中，“class="lazy" data-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 class="lazy" data-src="movie.mp4" type="video/mp4">
  <source class="lazy" data-src="movie.webm" type="video/webm">
  <source class="lazy" data-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" class="lazy" data-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 中如何添加、播放和控制视频，并对常用的一些播放特性进行了介绍。在实际开发过程中，开发者应注意兼容性问题，提供多种不同格式的视频文件，确保每个浏览器都能完美支持视频播放。

以上就是HTML中如何添加、播放和控制视频的详细内容，更多请关注编程网其它相关文章！