HTML`video`标签

探索使用HTML的基础知识video标签

video标签可让您将视频内容嵌入HTML页面。

该元素可以使用网络摄像头通过以下方式流式传输视频:getUserMedia()或者WebRTC,或者它可以播放您使用src属性:

<video src="file.mp4" />

默认情况下,浏览器不显示该元素的任何控件,仅显示视频。

这意味着仅当设置为自动播放时音频才会播放(稍后会详细介绍),并且用户看不到如何停止,暂停,控制音量或在视频中的特定位置跳过。

要显示内置控件,您可以添加controls属性:

<video src="file.mp4" controls />

这是在Chrome中的外观:

Video tag appearance

最初显示的图像是视频的第一帧。

您可以使用poster属性:

<video src="video.mp4" poster="image.png" controls />

如果不存在,浏览器将在可用时立即显示视频的第一帧。

您可以使用以下命令指定视频文件的MIME类型type属性。如果未设置,浏览器将尝试自动确定它:

<video src="file.mp4" controls type="video/mp4" />

默认情况下,视频文件不会自动播放。添加autoplay属性以自动播放音频:

<video src="file.mp4" controls autoplay />

某些浏览器还要求muted自动播放的属性。视频仅在静音时自动播放:

<audio src="file.mp3" controls autoplay muted />

loop属性(如果已设置)将在0:00重新开始播放视频,否则,如果视频不存在,则视频将在文件末尾停止:

<video src="file.mp4" controls autoplay loop />

您可以设置widthheight属性来设置元素将占用的空间,以便浏览器可以对其进行说明,并且在最终加载该元素时不会更改布局。它需要一个数值,以像素为单位。

CORS

视频受制于CORS并且除非您在服务器端允许,否则无法跨源播放视频。

如果将此标签放在网页中,则不会发生任何事情。无法开始播放视频,并且该视频不会自动播放。要播放视频,您必须添加autoplay属性:

<video src="video.mp4" autoplay />

更改视频显示属性

您可以使用widthheight属性:

<video src="video.mp4" poster="image.png" controls
height="600"
width="800" />

如果显示内容video不支持

video标签是很好的支持,直到IE9为止,因此现在不需要使用占位符文本,但是我们有此选项。您只需添加一个结束标记,然后在开始标记和结束标记之间插入文本:

<video src="video.mp4">Video tag not supported</video>

添加多个来源

浏览器可以实现一个视频编解码器,但不能实现另一种。也许您想使用一个新的标准将文件大小减少一半,但是您仍然希望支持旧的浏览器。

您可以通过source标签:

<video controls>
 <source src="video.mp4" type="video/mp4" />
 <source src="video.avi" type="video/avi"/>
</audio>

您可以使用CSS设置控件的样式,尽管这不在本介绍的范围之内。

预载视频

如果你不设置autoplay规范说,浏览器只会下载视频元数据(例如,找出长度),而不会下载视频本身。

您可以使用强制预加载视频

<video src="video.mp4" preload="auto" />

处理视频事件

我们可以听每个事件video使用JavaScript的元素,以创建有趣的项目和界面。有很多不同的事件可以玩。

play视频播放开始时触发事件:

document.querySelector('video').addEventListener('play', () => {
  alert('Video is playing!!!')
})

您也可以使用on<event>属性直接放在HTML元素上:

<video src="video.mp4" controls onplay="playing()" />
const playing = () => {
  alert('Video is playing!!!')
})

这些是您可以听的一些事件:

  • play视频开始播放
  • pause视频已暂停
  • ended视频播放完成
  • timeupdate用户与播放时间轴进行了交互,并且前进/后退
  • volumechange用户更改了音量

还有更多与视频加载相关的事件,并且您可以在MDN上找到完整列表

免费下载我的HTML手册


更多HTML教程: