常用属性：
src: 定义视频的URL。
<video src="myVideo.mp4"></video>poster: 设置视频尚未加载或播放时显示的图像URL。
<video src="myVideo.mp4" poster="thumbnail.jpg"></video>preload: 控制视频数据的加载策略，可以是 "auto"（默认，根据浏览器决定）、"metadata"（只加载元数据，如长度）或 "none"（不预先加载）。
<video src="myVideo.mp4" preload="auto"></video>autoplay: 规定视频是否应该在就绪后立即自动播放。
<video src="myVideo.mp4" autoplay></video>controls: 是否显示浏览器自带的播放控制（如播放/暂停按钮、进度条等）。
<video src="myVideo.mp4" controls></video>loop: 规定视频是否应在结束时重新开始播放。
<video src="myVideo.mp4" loop></video>width 和 height: 设置视频播放器的宽度和高度。
<video src="myVideo.mp4" width="320" height="240"></video>muted: 规定视频是否静音播放。
<video src="myVideo.mp4" muted></video>常用方法
- play()：
- 开始播放或继续播放视频。如果视频已经处于播放状态，则此方法无效。
var myVideo = document.querySelector('video');
myVideo.play();- pause()：
- 暂停视频播放。
myVideo.pause();- load()：
- 重新加载视频源或初始化当前选定的来源。这会清除任何现有播放位置或错误状态。
myVideo.load();- currentTime 属性（读写）：
- 读取或设置视频播放的当前时间（单位为秒）。
// 获取当前播放位置
var currentPos = myVideo.currentTime;
// 设置新的播放位置
myVideo.currentTime = 30; // 秒数- duration 属性（只读）：
- 返回视频的总时长（若已知）。
var totalDuration = myVideo.duration;1. paused 属性（只读）：
- 返回一个布尔值，表示视频是否处于暂停状态。
var isPaused = myVideo.paused;- volume 属性（读写）：
- 设置或获取视频音量（范围0.0-1.0）。
// 设置音量
myVideo.volume = 0.5;
// 获取音量
var volumeLevel = myVideo.volume;- mute() 和 unmute()：
- 静音和取消静音视频。
myVideo.mute(); // 静音
myVideo.unmute(); // 取消静音- requestFullscreen()：
- 请求视频进入全屏模式（需兼容不同浏览器的API，如 mozRequestFullScreen, webkitRequestFullscreen 等）。
if (myVideo.requestFullscreen) {
myVideo.requestFullscreen();
} else if (myVideo.mozRequestFullScreen) { /* Firefox */
myVideo.mozRequestFullScreen();
} else if (myVideo.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
myVideo.webkitRequestFullscreen();
}- addEventListener()：
- 用于监听视频相关的事件，如前面提及的
play,pause,ended等。
myVideo.addEventListener('ended', function() { console.log('Video has ended.'); });这些方法和属性共同构成了对HTML5 <video> 元素的基本控制，使开发者能够实现诸如播放控制、音量调节、播放位置定位、全屏切换等各种功能。
常用事件：
loadstart: 视频加载开始时触发。
var vid = document.querySelector('video');
vid.addEventListener('loadstart', function() { console.log('Loading started...'); });progress: 视频数据正在加载过程中持续触发。
vid.addEventListener('progress', function() { console.log('Data is loading...'); });loadeddata: 第一帧数据已加载完毕，此时视频可以开始播放，但不一定所有数据都已加载。
vid.addEventListener('loadeddata', function() { console.log('First frame is loaded.'); });canplay: 当前可用数据足以开始播放，但不保证流畅播放至结尾。
vid.addEventListener('canplay', function() { console.log('Ready to play.'); });canplaythrough: 预计有足够的数据可以流畅播放至视频结尾。
vid.addEventListener('canplaythrough', function() { console.log('Can play the video through without buffering issues.'); });play: 视频开始或恢复播放时触发。
vid.addEventListener('play', function() { console.log('Video is playing.'); });pause: 视频暂停时触发。
vid.addEventListener('pause', function() { console.log('Video is paused.'); });ended: 视频播放完毕时触发。
vid.addEventListener('ended', function() { console.log('Video has ended.'); });timeupdate: 当视频播放位置发生变化时持续触发，常用于实时更新进度条。
vid.addEventListener('timeupdate', function() { var currentTime = vid.currentTime; console.log('Current time:', currentTime); });error: 当视频加载或播放发生错误时触发。
vid.addEventListener('error', function(event) { console.error('An error occurred:', event.target.error); });常用视频插件推荐
Video.js: Video.js 是一个非常流行的开源 HTML5 视频播放器框架，它可以优雅地降级到 Flash 并提供一致的 UI 体验，易于自定义皮肤和扩展功能。官网：https://videojs.com/
Plyr : Plyr 是一个简洁、轻量级的 HTML5 视频和音频播放器，它支持自定义样式并且在各个浏览器之间提供了优秀的兼容性和一致性。官网：https://plyr.io/
Clappr: Clappr 是一个可扩展且易于使用的视频播放器，支持 HLS、MP4 和 Dash 流媒体协议。官网：https://github.com/clappr/clappr
HLS.js: 如果你需要播放 HLS（HTTP Live Streaming）流媒体，HLS.js 是一个纯 JavaScript 的 HLS 解析器和播放器，可以在不支持原生 HLS 的浏览器上播放 HLS 流。官网：https://github.com/video-dev/hls.js
每个库都有各自的特点和优势，可以根据项目需求来选择合适的视频播放库。