HTML5——视频/音频（新特性）0

最新推荐文章于 2022-01-24 16:53:40 发布

梅子1微酸

最新推荐文章于 2022-01-24 16:53:40 发布

阅读量684

点赞数

CC 4.0 BY-SA版权

分类专栏：大前端文章标签： HTML5 视频/音频

本文链接：https://blog.youkuaiyun.com/u013894429/article/details/79580700

大前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了HTML5中新增的视频和音频标签的基本用法，包括如何定义视频或音频源文件的位置、添加播放控件等内容，并探讨了不同浏览器对视频格式的支持情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

视频元素和音频元素是HTML5相比与原来的HTML新增的特性，它使得插入视频和音频不用再依赖flash等，便捷许多。下面是一些学习总结和心得，视频、音频两者的使用方法类似。

1. 视频/音频涉及的主要HTML标签

前两者当然就是定义视频或者音频啦；<source>用来指定视频或音频源文件的位置；<track>定义文本轨道，用来插字幕等。参考runoob菜鸟教程的例子，用法举例如下：

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

<video></video>创建了一个视频元素，这个视频元素是使用DOM控制的，拥有方法、属性、事件（后面会详细说）。

width和height属性指定了视频元素的宽度和高度，只有这两个属性（videoWidth和videoHeight）是立即可用的，视频元素的其他属性（如paused）必须在视频的元数据加载后才可用。如果只是创建了一个视频元素，没有源文件路径等的其他设置，当然没办法播放视频，如下图1中的1-a和1-b所示。

<source>标签指定了视频文件源及类型，src属性指定文件位置，type指定文件类型。这个<video></video>元素中插入了两个source，但其实只有一个视频源被播放，那为什么要两个source呢？原因是浏览器支持的视频格式不同，你不能保证用户用了什么浏览器打开你设计的网页呀，所以只好麻烦一点，不止放一个源文件，总有一个适合你的浏览器。具体执行时，浏览器按照代码顺序，使用第一个支持的source。但是，如果没有一个支持怎么办？那就显示“您的浏览器不支持Video标签”。也就是说上述代码的2、3、4句只有一句被执行。如图1-c所示是显示了一个视频文件。

注意：要src的路径要写对，例如本例中的视频文件跟.html网页文件在同一个文件夹，所以路径就直接写的src="XXX.mp4"。

controls属性定义视频是否有播放/暂停、音量、全屏等控件，如图1-c和1-d显示了有无controls的区别。

图1. 基本用法示例

2. 浏览器支持

不管是视频还是音频文件，都不可能不压缩地在web上传播（因为太大了，一张图片就由大量的0和1组成，何况视频和音频啊），所以这些文件都是压缩后的文件。怎样压缩能得到尽量小而失真尽量少的文件呢？不同的编码器有不同的算法，相应的也就需要不同的解码器。我们可以从后缀名可以看出编码方式。不同的浏览器可支持的视频/音频格式不是完全一样的。

HTML5 是 W3C 与 WHATWG 两个组织合作的结果。最初，HTML5规范希望规定一种各个浏览器都支持的视频/音频格式，但是协商不好、困难重重，最终只好放弃。所以有了浏览器支持的问题。这里还是参考runoob菜鸟教程，具体支持情况如下：

图2. 浏览器支持问题，参考http://www.runoob.com/html/html5-video.html

你看看，不同浏览器支持的视频格式不完全一样，而你又不知道用户会用什么浏览器打开你的网页，这可头疼了。解决这个问题，方法如下：

(1). 同时用多种格式的源文件，并且加上文字“您的浏览器不支持Video标签”，都放在<video></video>里。就如本文开头的那个例子一样，既有mp4格式，也有ogg格式，总有一个适合你；再不济，那就直接显示文字“您的浏览器不支持Video标签”。

这个方法需要注意的是，播放的内容只有一个，被选中的是代码顺序中第一个浏览器支持的格式；若都不支持，才显示<source>标签后的文字。

(2). 浏览器不支持，那你就自己写一段代码添加支持，请参考http://www.runoob.com/html/html5-browsers.html。

(3). 在<video></video>里再添加HTML4支持的视频/音频播放方法，用<object>标签，插入flash文件。也就是把本文开头的例子改为如下，不过这种方法又加了flash视频，其实就是HTML5出现以前的方法。

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持Video标签。
  <object data="videoplayer.swf" type="application/x-shockwave-flash">
    <param name="movie" value="movie.swf" />
  </object>
</video>