HTML如何插入视频

在HTML中,可以用 <video> 标签插入视频,例如:

<video src="rabbit320.webm" controls>
    <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

其中 src 属性指向想要嵌入网页中的视频资源; controls 属性用于提供浏览器默认的播放控件。

展现效果如下:

注意事项:

  • <video> 标签内的内容叫做后备内容,只有当浏览器不支持 <video> 标签的时候,才会显示这段内容,通过我们提供的 <a> 标签,使用户在无法播放时至少可以访问到这个文件。
  • 由于不同浏览器对视频格式的支持情况可能不同,应该使用多个播放源以提高兼容性。

提供多个播放源的写法如下:

<video controls>
    <source src="rabbit320.mp4" type="video/mp4">
    <source src="rabbit320.webm" type="video/webm">
    <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

可以看出:这种写法省略了 <video> 标签的 src 属性,转而在 <video> 标签内新增了多个 <source> 标签,用于提供不同格式的内容源。

一般来说,内容源应该至少包括WebM和MP4两种格式,这两种在目前已经足够支持大多数平台和浏览器。

<source> 标签的 type 属性是可选的,但是建议添加上这个属性,浏览器会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性,浏览器会尝试加载每一个文件,直到找到一个能正确播放的格式,这样会消耗掉大量的时间和资源。

除此以外, <video> 标签还有一些其他特性,看下面这个例子:

<video controls width="400" height="400" autoplay loop muted poster="poster.png">
    <source src="rabbit320.mp4" type="video/mp4">
    <source src="rabbit320.webm" type="video/webm">
    <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

widthheight 属性用于控制视频的尺寸;autoplay 属性会使音频和视频内容立即播放;loop 属性可以让音频或者视频文件循环播放;muted 属性会导致媒体播放时,默认关闭声音;poster 属性指向了一个图像的URL,这个图像会在视频播放前显示。通常用于粗略的预览或者广告;还有一个 preload 属性用来缓冲较大的文件,有 3 个值可选:"none" 表示不缓冲,"auto" 表示页面加载后缓存媒体文件,"metadata" 表示仅缓冲文件的元数据。