1 视频播放video标签；
<!-- 1 src 视频路径 --> <!-- 2 width宽度 --> <!-- 3 height高度 --> <!-- 4 controls 视频控件 --> <video src="https://www.w3school.com.cn/i/movie.ogg" width="500px" height="300px" controls="controls"> <!-- video标签之间插入的内容是供不支持video元素的浏览器显示的--> Your browser does not support the video tag. </video>
2 视频播放video + source标签
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式,但1个video标签只能播放一个视频
<video width="320" height="240" controls="controls"> <source src="https://www.w3school.com.cn/i/movie.ogg" type="video/ogg"> <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
3 视频在就绪后马上播放autoplay
高版本浏览器，对视频静音后，可以保证视频自动播放,所以在使用autoplay="autoplay"样式时,必须添加muted="muted" 其规定视频输出应该被静音
<video width="320" height="240" controls="controls" muted="muted" autoplay="autoplay"> <source src="https://www.w3school.com.cn/i/movie.ogg" type="video/ogg"> <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
4 媒介文件完成播放后再次开始播放loop
<video width="320" height="240" controls="controls" muted="muted" autoplay="autoplay" loop="loop"> <source src="https://www.w3school.com.cn/i/movie.ogg" type="video/ogg"> <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
5 通过JS实现自定义控件
<video id="vid" src="https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209104902N3v5Vpxuvb.mp4" controls="controls"></video> <button id="start">开始</button> <button id="pause">暂停</button> <button id="restart">重新开始</button> <select name="" id="speed"> <option value="0.1">10倍慢放</option> <option value="0.5">5倍慢放</option> <option value="1" selected>正常</option> <option value="1.5">快速</option> <option value="2">超快速</option> </select> <script type="text/javascript"> //播放视频 start.onclick = function() { vid.play(); } //暂停视频 pause.onclick = function() { vid.pause(); } //重新播放 restart.onclick = function() { vid.currentTime = 0; //vid.play(); } //监听视频元数据加载完毕事件 vid.onloadedmetadata = function() { //弹出视频的总时长 console.log(this.duration); } //改变视频的播放速度 speed.onchange = function() { vid.playbackRate = this.value; } </script>
6 通过JS实现自定义红色进度条
<!DOCTYPE html> <html> <head> <style type="text/css"> video { width: 500px; } #big { width: 500px; height: 5px; background: #dedede; } #small { width: 0; height: 5px; background: red; } </style> </head> <body> <video id="vid" src="https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209104902N3v5Vpxuvb.mp4" controls="controls"></video> <div id="big"> <div id="small"></div> </div> <script type="text/javascript"> //监听播放速度,改变红色进度条的长度 vid.ontimeupdate = function() { //监听当时的播放事件 var currentTime = this.currentTime; //当前视频的总时长 var duration = this.duration; //改变红色条的宽度 small.style.width = currentTime / duration * 100 + "%"; //small.style.width = currentTime / duration * 500 + "px"; } //点击红色进度条,改变播放进度 big.onclick = function(e) { //距离左边框的距离 var x = e.clientX; //big标签距离左边框的距离 var ol = this.offsetLeft; //红色进度条的宽度 var distance = x - ol; vid.currentTime = distance / 500 * vid.duration; } </script> </body> </html>
7 小视频测试URL
以下视频皆收集于网络。
2020年2月18日更新，新冠肺炎疫情相关视频：武汉加油中国加油
https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4
https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4
https://stream7.iqilu.com/10339/article/202002/18/2fca1c77730e54c7b500573c2437003f.mp4
https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218025702PSiVKDB5ap.mp4
https://stream7.iqilu.com/10339/upload_transcode/202002/18/202002181038474liyNnnSzz.mp4
https://stream7.iqilu.com/10339/article/202002/18/02319a81c80afed90d9a2b9dc47f85b9.mp4
http://stream4.iqilu.com/ksd/video/2020/02/17/c5e02420426d58521a8783e754e9f4e6.mp4
http://stream4.iqilu.com/ksd/video/2020/02/17/87d03387a05a0e8aa87370fb4c903133.mp4
https://stream7.iqilu.com/10339/article/202002/17/c292033ef110de9f42d7d539fe0423cf.mp4
http://stream4.iqilu.com/ksd/video/2020/02/17/97e3c56e283a10546f22204963086f65.mp4
https://stream7.iqilu.com/10339/article/202002/17/778c5884fa97f460dac8d90493c451de.mp4
https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217021133Eggh6zdlAO.mp4
https://stream7.iqilu.com/10339/article/202002/17/4417a27b1a656f4779eaa005ecd1a1a0.mp4
https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217104524H4D6lmByOe.mp4
https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217101826WjyFCbUXQ2.mp4
http://stream.iqilu.com/vod_bag_2016//2020/02/16/903BE158056C44fcA9524B118A5BF230/903BE158056C44fcA9524B118A5BF230_H264_mp4_500K.mp4
https://stream7.iqilu.com/10339/upload_transcode/202002/16/20200216050645YIMfjPq5Nw.mp4
https://stream7.iqilu.com/10339/article/202002/16/3be2e4ef4aa21bfe7493064a7415c34d.mp4
https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209105011F0zPoYzHry.mp4
https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209104902N3v5Vpxuvb.mp4
2019.09.28更新20条速度比较快的地址： 各种尺寸都有，主要是4：3和16：9的，自己区分下。
https://v-cdn.zjol.com.cn/280443.mp4
https://v-cdn.zjol.com.cn/276982.mp4
https://v-cdn.zjol.com.cn/276984.mp4
https://v-cdn.zjol.com.cn/276985.mp4
https://v-cdn.zjol.com.cn/276986.mp4
https://v-cdn.zjol.com.cn/276987.mp4
https://v-cdn.zjol.com.cn/276988.mp4
https://v-cdn.zjol.com.cn/276989.mp4
https://v-cdn.zjol.com.cn/276990.mp4
https://v-cdn.zjol.com.cn/276991.mp4
https://v-cdn.zjol.com.cn/276992.mp4
https://v-cdn.zjol.com.cn/276993.mp4
https://v-cdn.zjol.com.cn/276994.mp4
https://v-cdn.zjol.com.cn/276996.mp4
https://v-cdn.zjol.com.cn/276998.mp4
https://v-cdn.zjol.com.cn/277000.mp4
https://v-cdn.zjol.com.cn/277001.mp4
https://v-cdn.zjol.com.cn/277002.mp4
https://v-cdn.zjol.com.cn/277003.mp4
https://v-cdn.zjol.com.cn/277004.mp4