版权声明：作者已开启版权声明，如转载请注明转载地址。 https://blog.csdn.net/qq_34829447/article/details/83928581
一.Video相关属性和方法
- 贴图poster
- 循环播放loop
- 播放地址设置
- 控制条controls
- 预加载preload
- 静音muted
- 自动播放autoplay
- 音量volume
- 播放时间设置
二.框架搭建
1.使用Web Server浏览器插件
- 使用Web Server For Chrome浏览器插件(chrom插件)可以保证通过http访问html文件
- 在插件中选择打开的folder，并选择下方的地址直接打开即可（通过http访问）
2.video框架搭建及基础语法
-
实例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>video 详解</title> </head> <body> <!-- 基础用法 --> <video src="./test.mp4" width="400" height="225" controls controlslist="nodownload nofullscreen"></video> </body> </html>- src属性用来控制源地址
- width和height设置宽高
- controls设置页面显示选项按键
- controlslist用来解决相关选项按键隐藏功能如（nodownload不显示下载，nofullscreen不显示全屏）
三.video详解
1.video标签属性
-
实例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>video 详解</title> </head> <body> <!-- 基础用法 --> <video src="./test.mp4" width="400" height="225" controls controlslist="nodownload nofullscreen"></video> <!-- video贴图 --> <video src="./test.mp4" width="400" height="225" controls poster="./poster.JPG"></video> <!-- video自动播放 --> <video src="./test.mp4" width="400" height="225" autoplay muted controls poster="./poster.JPG"></video> <!-- 静音 --> <video src="./test.mp4" width="400" height="225" muted controls poster="./poster.JPG"></video> <!-- 循环播放 --> <video src="./test.mp4" width="400" height="225" muted loop controls poster="./poster.JPG"></video> <!-- 预加载 --> <video src="./test.mp4" width="400" height="225" preload controls poster="./poster.JPG"></video> <!-- 音量控制 --> <video src="./test.mp4" id="_volume" width="400" height="225" controls poster="./poster.JPG"></video> <script> let v = document.getElementById('_volume'); v.volume = 0.5; </script> <!-- 播放时间控制 --> <video src="./test.mp4" id="_time" width="400" height="225" controls poster="./poster.JPG"></video> <script> let time = document.getElementById('_time'); time.currentTime = 60;//单位：秒 </script> <!-- 清晰度切换：其实就是切换视频地址 --> <video src="./test.mp4" id="_src" width="400" height="225" controls poster="./poster.JPG"></video> <script> let src = document.getElementById('_src'); console.log(src.src)//输出的是绝对地址：http://127.0.0.1:8887/test.mp4 setTimeout(()=>{ src.src = './test2.mp4'//赋值的时候赋的是相对地址 },5000); </script> <!-- 备用地址切换 --> <video width="400" height="225" controls poster="./poster.JPG"> <source src="./test3.mp4" type="video/mp4"><!-- 错误资源 --> <source src="./test2.mp4" type="video/mp4"> </video> <script> let source = document.getElementById('_source'); setTimeout(()=>{ console.log(source.currentSrc)//http://127.0.0.1:8887/test2.mp4 },1000); </script> </body> </html> -
video贴图
- 使用poster属性设定贴图图片
- 没有poster则会显示视频第一帧
- 有poster则会显示poster设定的图片
-
video自动播放
- 使用autoplay设定页面打开后自动播放
- 注意：18年chrome已经不支持autoplay，原因是为了提高用户体验，防止一进入网页就会自动播放过大的音频，故需要加muted实现静音自动播放。
-
video静音
- 使用muted属性设定页面打开后默认静音
-
video循环播放
- 使用loop属性设定视频播放结束后循环播放
-
video预加载
- 使用preload属性设定video预加载
-
音量控制
- 虽然video标签有volume属性，但该属性直接赋值无效，需要使用js动态添加volume值才可以生效
-
播放时间控制
- 使用js设定标签的currentTime属性值决定当前视频的时间点
-
清晰度切换
- 清晰度切换其实就是切换视频地址，即src
- 输出src属性是绝对地址
- 赋值src属性可以是相对地址
-
备份地址切换
- video可以使用src设置视频地址，也可以使用source子标签中添加src指定视频地址（此时video标签中的src去掉）
- source设置视频地址的好处在于，如果上方的source源出现问题，则会使用下方的source源地址资源（从上到下优先播放原则）
- 通常我们将同一个视频部署到两个域下，当其中一个域地址的视频出现问题时，则会播放另一个域地址的视频
- 使用source时，需要通过video的currentSrc值得到对应播放的资源地址（即内部正在使用的source的src值），并通过排除法查看当前播放的地址与上方没有播放的地址进行对比，即可以得到哪些资源出现问题，并进行排查
2.video事件
-
video事件
- 视频查找loadstart
- 时长变化durationchange
- 元数据加载loadedmetadata
- 视频下载监听progress
- 可播放监听canplay
- 可流畅播放监听canplaythrough
- 播放监听play
- 暂停监听pause
- 查找开始
- 查找结束
- 视频加载等待
- 视频结束
-
实例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>视频事件</title> </head> <body> <!-- video事件 --> <video src="./test.mp4" id="vs" width="400" height="225" controls></video> <script> let vs = document.getElementById('vs'); console.log('durationchange',vs.duration);//视频创建初期是没有值的，NAN //loadstart vs.addEventListener('loadstart',(e)=>{ console.log('laodstart'); //视频开始加载的时候会出发loadstart事件 }); //durationchange vs.addEventListener('durationchange',(e)=>{ console.log('durationchange',vs.duration);//当加载完视频资源后，会触发durationchange事件得到视频的时长 //durationchange不一定会触发一次，有时会触发多次 //blob等类型的文件不会一次性加载完，则拿不到全部的总时长，会部分加载，也会得到部分的总时长 }); //loadedmetadata vs.addEventListener('loadedmetadata',(e)=>{ console.log('loadedmetadata');//视频元数据加载完成时调用 }); //当前的帧数据已经加载，但是没有足够的数据播放帧的下一帧时，会触发loadeddata事件 //loadeddata vs.addEventListener('loadeddata',(e)=>{ console.log('loadedmetadata'); }); //如何知道当前正在下载资源数据 //progress vs.addEventListener('progress',(e)=>{ console.log('progress');//视频正在下载资源时触发 }); //canplay表示当前可播放事件 vs.addEventListener('canplay',(e)=>{ console.log('canplay');//当当前有帧去播放时，会触发canplay事件 }); //canplaythrough vs.addEventListener('canplaythrough',(e)=>{ console.log('canplaythrough');//当当前可以流畅播放时，会触发canplaythrough }); //当监听到canplay或canplaythrough时才可以播放 //play播放 v.addEventListener('play',(e)=>{ console.log('play');//当点击播放或使用js点击播放时，会触发play事件 }); //pause暂停 v.addEventListener('pause',(e)=>{ console.log('pause');//当点击暂停或使用js调用暂停时，会触发pause事件 }); </script> </body> </html>
未完待续…