HTML5 Video标签，你掌握了哪些属性、方法与事件？

HTML5 Video标签常用属性包括src（视频源）、controls（控制条）、autoplay（自动播放）等；方法有play()、pause()等；事件如onplay、onpause。

HTML5的Video标签提供了丰富的属性、方法和事件，使得在网页中嵌入和控制视频变得更加简单和灵活，以下是对这些特性的详细汇总：

常用属性

1、src：定义视频文件的URL地址。

2、poster：设置视频加载或播放前显示的图片URL。

3、preload：控制视频数据的预加载策略，可选值包括"auto"（默认）、"metadata"（仅加载元数据）或"none"（不预先加载）。

4、autoplay：规定视频是否应在页面加载后自动播放。

5、controls：显示浏览器自带的播放控件，如播放/暂停按钮、音量控制等。

6、loop：规定视频是否应在结束时重新开始播放。

7、width 和 height：设置视频播放器的宽度和高度。

8、muted：规定视频是否静音播放。

9、crossorigin：指定视频是否应以CORS方式加载，对于需要访问视频帧数据的跨域视频至关重要。

10、controlslist：允许开发者精细控制浏览器提供的默认视频控件中显示或隐藏的特定组件。

常用方法

1、play()：开始或恢复视频播放。

2、pause()：暂停视频播放。

3、load()：重新加载视频源或初始化当前选定的来源。

4、volume：设置或获取视频音量，范围是0.0到1.0。

5、mute() 和 unmute()：静音和取消静音视频。

6、requestFullscreen()：请求视频进入全屏模式，需兼容不同浏览器的API。

7、addEventListener()：用于**视频相关的事件，如play、pause、ended等。

常用事件

1、loadstart：视频加载开始时触发。

2、progress：视频数据正在加载过程中持续触发。

3、loadeddata：第一帧数据已加载完毕，此时视频可以开始播放。

4、canplay：当前可用数据足以开始播放，但不保证流畅播放至结尾。

5、canplaythrough：预计有足够的数据可以流畅播放至视频结尾。

6、seeking：用户正在寻找视频中的某个位置。

7、seeked：用户已找到视频中的某个位置。

8、timeupdate：播放时间更新时触发。

9、ended：视频播放结束时触发。

10、ratechange：播放速率改变时触发。

11、durationchange：资源长度改变时触发。

12、volumechange：音量改变时触发。

相关问答FAQs

1、问：如何让HTML5 Video标签在页面加载完成后自动播放？

答：要使HTML5 Video标签在页面加载完成后自动播放，只需在<video>标签中添加autoplay属性即可，如下所示：

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

这将指示浏览器在页面加载完成后立即开始播放视频。

2、问：如何在JavaScript中控制HTML5 Video的播放和暂停？

答：在JavaScript中，可以通过调用Video元素的play()和pause()方法来控制HTML5 Video的播放和暂停，需要通过document.querySelector或其他DOM选择器获取到Video元素，然后调用相应的方法，如下所示：

var myVideo = document.querySelector('video');myVideo.play(); // 开始播放视频myVideo.pause(); // 暂停视频播放

这样，就可以根据需要在JavaScript代码中控制视频的播放和暂停状态了。

分类	属性/方法/事件	描述
属性	autoplay	如果设置为 true，则视频在就绪后立即播放。
	controls	如果设置为 true，则向用户显示控件，如播放按钮、音量控制等。
	height	视频的高度（以像素为单位）。
	loop	如果设置为 true，则视频播放结束后重新开始播放。
	muted	如果设置为 true，则视频在加载时静音。
	poster	视频开始播放前显示的图像。
	src	视频文件的路径。
	width	视频的宽度（以像素为单位）。
	preload	视频在页面加载时预加载的策略（auto, metadata, none）。
	playsinline	如果设置为 true，则视频在移动设备上以 inline 模式播放。
	muted	如果设置为 true，则视频在加载时静音。
	crossOrigin	设置或返回一个字符串，表示是否允许跨源请求。
方法	play()	开始播放视频。
	pause()	暂停当前播放的视频。
	load()	加载视频，重新开始播放。
	currentTime	设置或返回视频播放的当前时间（以秒为单位）。
	volume	设置或返回视频的音量（从 0.0 到 1.0）。
	duration	返回视频的总时长（以秒为单位）。
事件	canplay	当媒体足够数据可以开始播放时触发。
	canplaythrough	当媒体足够数据可以无需等待即可播放整个媒体时触发。
	ended	当视频播放结束时触发。
	error	当在加载或处理媒体时发生错误时触发。
	loadeddata	当媒体已加载但可能无法播放时触发。
	loadedmetadata	当足够元数据已加载时触发。
	playing	当视频开始播放时触发。
	pause	当视频暂停时触发。
	seeking	当用户开始寻找新位置时触发。
	seeked	当用户寻找新位置后触发。
	waiting	当视频等待加载更多数据时触发。

这里的属性、方法和事件并不是所有浏览器都完全支持，部分属性和方法可能在某些浏览器或版本中不可用。