HTML5 Video 视频标签全属性详解

HTML5 视频标签 <video> 是用于在网页上嵌入视频的标准标签。它提供了很多属性，使得我们能够对视频的播放、尺寸、样式等进行控制。本篇文章将会详细介绍 <video> 标签的所有属性及其用法。

基本属性

• src：视频文件的 URL 地址。
• controls：显示播放器控件，包括播放/暂停按钮、音量控制、进度条等。
• autoplay：自动播放视频。
• loop：循环播放视频。

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

进一步控制视频播放

• preload：预加载视频。有三个可选值：
• none：视频不会预加载，在用户点击播放时再进行下载。
• metadata：只预加载视频的元信息（比如分辨率、长度等）。
• auto：默认值。自动预加载整个视频。
• muted：静音播放视频。
• defaultMuted：在没有禁用音频时默认静音。
• volume：设置音量大小，范围为 0-1。
• currentTime：设置视频播放的起始时间，单位为秒。

<video src="video.mp4" preload="metadata" muted volume="0.5" currentTime="30"></video>

视频尺寸和显示

• poster：视频封面，即在视频加载前显示的图片。
• width：设置视频宽度。
• height：设置视频高度。
• aspectRatio：设置视频的宽高比，其值为 "宽度:高度" 的形式，例如 16:9。
• playsinline：在 iOS Safari 中播放视频时不会进入全屏模式。一般用于网页内嵌视频时使用。

<video src="video.mp4" poster="video_poster.jpg" width="640" height="360" aspectRatio="16:9" playsinline></video>

事件属性

• onloadstart：视频开始加载时触发的事件。
• onloadedmetadata：视频的元信息加载完成时触发的事件。
• onloadeddata：视频的所有数据都已加载完成时触发的事件。
• oncanplay：可以开始播放视频时触发的事件。
• onplaying：视频已经开始播放时触发的事件。

<video src="video.mp4" onloadstart="alert('视频加载开始')" onplaying="alert('视频开始播放')"></video>

其他属性

• crossorigin：设置视频跨域请求的 CORS 属性。
• controlslist：控制控件的显示方式，可选值为 nodownload、nofullscreen 和 noremoteplaybac。
• disablePictureInPicture：禁止使用画中画模式。
• disableRemotePlayback：禁止远程播放。

<video src="video.mp4" crossorigin="anonymous" controlslist="nofullscreen" disablePictureInPicture disableRemotePlayback></video>

以上就是 <video> 标签的所有属性。通过合理运用这些属性，我们能够更好地控制网页中的视频播放，使之更符合我们的需求。