阅读量:0
HTML5 Video标签用于在网页中嵌入视频，具有多种属性、方法和事件。主要属性包括src（设置视频URL）、controls（显示控件）、autoplay（自动播放）等；方法有play()、pause()等；事件包括loadstart、canplay、playing等。
HTML5 Video标签的属性
| 属性名 | 描述 |
| src | 定义视频的URL。 |
| poster | 设置视频尚未加载或播放时显示的图像URL。 |
| preload | 控制视频数据的加载策略，可以是 "auto"（默认，根据浏览器决定）、"metadata"（只加载元数据，如长度）或 "none"（不预先加载）。 |
| autoplay | 规定视频是否应该在就绪后立即自动播放。 |
| controls | 是否显示浏览器自带的播放控制（如播放/暂停按钮、进度条等）。 |
| loop | 规定视频是否应在结束时重新开始播放。 |
| width 和 height | 设置视频播放器的宽度和高度。 |
| muted | 规定视频是否静音播放。 |
| crossorigin | 指定视频是否应该以 CORS 方式加载，这对于需要访问视频帧数据的跨域视频至关重要。 |
| controlslist | 允许开发者精细控制浏览器提供的默认视频控件中显示或隐藏的特定组件，以适应不同的用户体验需求或设计要求。 |
HTML5 Video标签的方法
| 方法名 | 描述 |
| play() | 开始播放或继续播放视频，如果视频已经处于播放状态，则此方法无效。 |
| pause() | 暂停视频播放。 |
| load() | 重新加载视频源或初始化当前选定的来源，这会清除任何现有播放位置或错误状态。 |
| currentTime (读写) | 读取或设置视频播放的当前时间（单位为秒）。 |
| duration (只读) | 返回视频的总时长（若已知）。 |
| paused (只读) | 返回一个布尔值，表示视频是否处于暂停状态。 |
| volume (读写) | 设置或获取视频音量（范围0.01.0）。 |
| mute() 和 unmute() | 静音和取消静音视频。 |
| requestFullscreen() | 请求视频进入全屏模式（需兼容不同浏览器的API，如 mozRequestFullScreen, webkitRequestFullscreen 等）。 |
| addEventListener() | 用于监听视频相关的事件，如前面提及的 play, pause, ended 等。 |
HTML5 Video标签的事件
| 事件名 | 描述 |
| loadstart | 视频加载开始时触发。 |
| progress | 视频数据正在加载过程中持续触发。 |
| loadeddata | 第一帧数据已加载完毕，此时视频可以开始播放，但不一定所有数据都已加载。 |
| canplay | 当前可用数据足以开始播放，但不保证流畅播放至结尾。 |
| canplaythrough | 预计有足够的数据可以流畅播放至视频结尾。 |
| timeupdate | 播放时间改变时触发。 |
| ended | 播放结束时触发。 |
| ratechange | 播放速率改变时触发。 |
| volumechange | 音量改变时触发。 |
| suspend | 延迟下载。 |
| abort | 客户端主动终止下载（不是因为错误引起）。 |
| error | 请求数据时遇到错误。 |
| stalled | 网速失速。 |
| play | play()和autoplay开始播放时触发。 |
| pause | pause()触发。 |
| loadedmetadata | 成功获取资源长度。 |
| loadeddata | 数据加载完成。 |
| waiting | 等待数据，并非错误。 |
| playing | 开始回放。 |
| seek | 寻找中。 |
| seeked | 寻找完毕。 |
FAQs
Q1: 如何通过JavaScript控制HTML5 Video标签的播放？
A1: 你可以通过调用Video元素的play()方法来控制HTML5 Video标签的播放。
var myVideo = document.querySelector('video'); myVideo.play();Q2: HTML5 Video标签的crossorigin属性有什么作用？
A2: HTML5 Video标签的crossorigin属性用于指定视频是否应该以CORS（CrossOrigin Resource Sharing，跨源资源共享）方式加载，这对于需要访问视频帧数据的跨域视频至关重要，其可选值有：
anonymous：请求不包含凭据。
usecredentials：请求包含凭据（如cookie、HTTP认证等）。
HTML5 Video 标签属性、方法和事件汇总介绍
HTML5 的<video> 标签用于在网页中嵌入视频内容，以下是对<video> 标签的属性、方法和事件的详细汇总介绍。
属性
基本属性
controls：是否显示视频控件（播放、暂停、音量等）。
autoplay：是否在页面加载时自动播放视频。
loop：是否循环播放视频。
muted：是否在开始时静音视频。
preload：视频在页面加载时如何加载，可选值有 "auto"、"metadata"、"none"。
src：视频文件的URL。
多媒体格式相关属性
poster：视频开始播放前显示的图片。
width 和height：视频的宽度和高度，通常与poster 属性的图片尺寸相匹配。
type：视频的MIME类型，用于浏览器确定是否支持视频格式。
其他属性
playbackrate：播放速度，可以是一个数字或 "n"（n 是倍数）。
currentTime：当前播放时间（秒）。
pause()：暂停视频。
play()：播放视频。
currentTime：当前播放时间（秒）。
ended：视频是否已播放完毕。
方法
play()：开始播放视频。
pause()：暂停播放视频。
currentTime：获取或设置当前播放时间（秒）。
volume：获取或设置音量（01之间）。
load()：重新加载视频。
duration：视频的总时长（秒）。
事件
canplay：当浏览器可以播放视频时触发。
canplaythrough：当浏览器可以播放整个视频而不需要缓冲时触发。
ended：当视频播放结束时触发。
error：当播放过程中发生错误时触发。
loadeddata：当视频的元数据已加载时触发。
loadstart：当视频开始加载时触发。
playing：当视频开始播放时触发。
pause：当视频暂停时触发。
seeked：当视频定位改变后触发。
seeking：当视频定位正在改变时触发。
stalled：当视频播放被阻塞时触发。
timeupdate：当播放时间更新时触发。
waiting：当视频等待可播放状态时触发。
以下是一个简单的<video> 标签示例：
<video controls autoplay loop muted poster="poster.jpg" width="640" height="360" src="movie.mp4" type="video/mp4"> 您的浏览器不支持视频标签。 </video>
在这个示例中，视频会自动播放、循环、静音，并在加载前显示一个海报图片，如果浏览器不支持<video> 标签，将显示一条消息提示用户。
