HTML`video`标签

The video tag allows you to embed video content in your HTML pages.

video标签允许您将视频内容嵌入HTML页面。

This element can stream video, using a webcam via getUserMedia() or WebRTC, or it can play a video source which you reference using the src attribute:

此元素可以使用网络摄像头通过getUserMedia()或WebRTC流式传输视频，也可以播放您使用src属性引用的视频源：

<video src="file.mp4" />

By default the browser does not show any controls for this element, just the video.

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

Which means the audio will play only if set to autoplay (more on this later) and the user can’t see how to stop it, pause it, control the volume or skip at a specific position in the video.

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

To show the built-in controls, you can add the controls attribute:

要显示内置控件，可以添加controls属性：

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

This is how it looks in Chrome:

这是在Chrome中的外观：

The image initially displayed is the first frame of the video.

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

You can display another image, which is pretty a common need, using the poster attribute:

您可以使用poster属性显示另一个非常常见的图像：

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

If not present, the browser will display the first frame of the video as soon as it’s available.

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

You can specify the MIME type of the video file using the type attribute. If not set, the browser will try to automatically determine it:

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

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

A video file by default does not play automatically. Add the autoplay attribute to play the audio automatically:

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

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

Some browsers also require the muted attribute to autoplay. The video autoplays only if muted:

某些浏览器还需要muted属性才能自动播放。 视频仅在静音时自动播放：

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

The loop attribute restarts the video playing at 0:00 if set, otherwise if not present the video stops at the end of the file:

如果设置了loop属性，则在0:00时重新开始播放视频，否则，如果视频不存在，则视频在文件末尾停止：

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

You can set the width and height attributes to set the space that the element will take, so that the browser can account for it and it does not change the layout when it’s finally loaded. It takes a numeric value, expressed in pixels.

您可以设置width和height属性来设置元素将要占用的空间，以便浏览器可以考虑它，并且在最终加载时它不会更改布局。 它需要一个数值，以像素为单位。

CORS (CORS)

Video is subject to CORS and unless you allow it on the server side, a video can’t be played cross-origin.

视频受CORS的约束，除非您在服务器端允许，否则无法跨源播放视频。

Nothing happens if you put this tag in a web page. There is no way to start the video, and it does not play autonomously. To make the video play, you must add the autoplay attribute:

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

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

更改视频显示属性 (Changing the video display properties)

You can set a width and height for the video area, expressed in pixels, using the width and height attributes:

您可以使用width和height属性为视频区域设置宽度和高度，以像素为单位：

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

如果不支持video则显示内容 (Displaying content if video is not supported)

The video tag is very well supported, up to IE9, so nowadays there should be no need to have a placeholder text, but we have this option. You just add a closing tag, and insert text between the opening and closing tag:

video标签受到IE9的高度支持 ，因此，如今不需要使用占位符文本，但是我们有此选项。 您只需添加一个结束标记，然后在开始标记和结束标记之间插入文本：

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

添加多个来源 (Adding multiple sources)

Browsers can implement one video codec but not another. Maybe you want to use a newer standard which cuts file size in half but you still want to support older browsers.

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

You do so with the source tag:

您可以使用source标签：

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

You can style controls using CSS, although this is out of the scope for this introduction.

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

预载视频 (Preloading the video)

If you don’t set autoplay, the spec says that browsers will only download the video metadata (to find out the length, for example) but will not download the video itself.

如果未设置autoplay ，那么规范将规定浏览器将仅下载视频元数据(例如，找出长度)，而不会下载视频本身。

You can force preloading the video using

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

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

处理视频事件 (Working with video events)

We can listen for events on each video element using JavaScript, to create interesting projects and interfaces. There is a lot of different events to play with.

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

The play event is fired when the video playback starts:

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

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

You can also directly add this event (as the others) using the on<event> attribute directly on the HTML element:

您还可以直接在HTML元素上使用on<event>属性直接添加此事件(与其他事件一样)：

<video src="video.mp4" controls onplay="playing()" />

const playing = () => {
  alert('Video is playing!!!')
})

These are a few events you can listen to:

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

• play video started playing

  play视频开始播放

• pause video was paused

  pause视频已暂停

• ended video playing completed

  ended视频播放完毕

• timeupdate the user interacted with the playback timeline and went forward/backwards

  timeupdate用户与播放时间轴交互并前进/后退

• volumechange the user changed the volume

  volumechange用户更改了音量

There are a lot more events related to the video loading, and you can find the full list on MDN.

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

翻译自: https://flaviocopes.com/html-video-tag/