Html5 video标签学习

`<video>` 标签的属性

`autoplay`	布尔属性	声明该属性后，视频会尽快自动开始播放，不会停下来等待数据全部加载完成。
`controls`	布尔属性	如果存在该属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放。
`controlslist`	枚举属性	帮助浏览器选择在控制面板上显示哪些 video 元素控件。允许的值有 `nodownload`、`nofullscreen` 和 `noremoteplayback`。
`crossorigin`	枚举属性	指明是否使用 CORS 来获取相关视频。允许的值有 `anonymous` 和 `use-credentials`。
`disablepictureinpicture`	布尔属性	防止浏览器显示画中画上下文菜单或在某些情况下自动请求画中画模式。
`disableremoteplayback`	布尔属性	禁用远程播放功能，在使用有线和无线技术连接设备时有效。
`height`	数值属性	视频显示区域的高度，单位是 CSS 像素（仅限绝对值；不支持百分比）。
`loop`	布尔属性	指定后会在视频播放结束的时候，自动返回视频开始的地方，继续播放。
`muted`	布尔属性	指明在视频中音频的默认设置。设置后，音频会初始化为静音。默认值是 `false`。
`playsinline`	布尔属性	指明视频将内嵌（inline）播放，即在元素的播放区域内。
`poster`	字符串属性	海报帧图片 URL，用于在视频处于下载中的状态时显示。
`preload`	枚举属性	提示浏览器在播放视频之前，加载哪些内容会达到最佳的用户体验。可能的值有 `none`、`metadata`、`auto` 和空字符串。
`src`	字符串属性	要嵌到页面的视频的 URL。可选；你也可以使用 video 块内的 `<source>` 元素来指定需要嵌到页面的视频。
`width`	数值属性	视频显示区域的宽度，单位是 CSS 像素（仅限绝对值；不支持百分比）。

<video> 元素的支持的事件

`audioprocess` (已弃用)	`ScriptProcessorNode` 的输入缓冲区已准备好进行处理。
`canplay`	浏览器可以播放媒体，但估计尚未缓冲足够的数据，无法流畅播放至视频结束，期间可能出现停顿以便缓冲更多内容。
`canplaythrough`	浏览器估计它可以不间断地播放到媒体末尾，无需暂停以进行内容缓冲。
`complete`	已终止 `OfflineAudioContext` 的渲染。
`durationchange`	`duration` 属性已更新。
`emptied`	媒体内容已清空；例如，如果媒体已加载（或部分加载）完成，并调用 `load()` 方法重新加载。
`ended`	视频停止播放，因为媒体已经到达结束点。
`error`	获取媒体数据时出现错误，或者资源的格式不受支持。
`loadeddata`	媒体的首帧已加载完成。
`loadedmetadata`	元数据已加载完毕。
`loadstart`	浏览器开始加载资源时触发。
`pause`	播放已暂停。
`play`	播放已开始。
`playing`	已经在暂停或因数据不足而延迟后准备好进行播放。
`progress`	在浏览器加载资源期间周期性触发。
`ratechange`	播放速率发生变化。
`seeked`	拖动进度（seek）操作完成。
`seeking`	拖动进度操作开始。
`stalled`	用户代理尝试获取媒体数据，但意外地无法获取数据。
`suspend`	媒体数据加载已暂停。
`timeupdate`	由 `currentTime` 属性指示的播放时间已更新。
`volumechange`	音量发生变化。
`waiting`	由于暂时缺少数据而停止播放。

效果

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Video Element Demo</title><style>.video-container {max-width: 600px;margin: 0 auto;}video {width: 100%;}</style>
</head><body><div class="video-container"><video id="myVideo" controls autoplay loop muted playsinline poster="http://www.it028.com/compatible_chrome.gif"preload="auto" width="600" height="400"><source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"><source src="webm" type="video/webm">您的浏览器不支持video标签</video><div id="videoEvents"></div></div><script>const video=document.getElementById('myVideo');const videoEvents=document.getElementById('videoEvents');//用于记录视频事件的Helper函数function logEvent (event) {const log=document.createElement('div');log.textContent=`Event: ${event.type}`;videoEvents.appendChild(log);}// 要侦听的事件列表const events=['play','pause','ended','volumechange','timeupdate','seeked','seeking','loadeddata','loadedmetadata','progress','canplay','canplaythrough','stalled','suspend','waiting'];// 将事件侦听器附加到视频元素events.forEach(event => {video.addEventListener(event,logEvent);});// 更改音量和当前时间的示例video.addEventListener('loadeddata',() => {video.volume=0.5;video.currentTime=10;});</script></body></html>