<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><link href="css/video-js.min.css" rel="stylesheet"><script src="js/video.min.js"></script><style>body {display: flex;/* justify-content: center; *//* align-items: center; *//* height: 100vh;*/}</style><body><button class="qiehuan">切换</button><button class="fanhui">返回</button><video class="video-js" controls="" autoplay="" style="width: 400px; height: 300px;" id="e_video" preload="metadata"><source id="source" type="video/mp4" src=""></video></body><script type="text/javascript" src="js/jquery-2.1.0.min.js"></script><script type="text/javascript">var myVid;var vList = ["video/neitou.mp4","video/neitou.mp4"]; //视频集
var curr = 0; //播放第几个视频
var options = {"playbackRates": [0.25, 0.5, 1, 1.5, 2, 4, 8, 16]
}; //播放倍数//静态用于演示
$(function() {$("#source").attr("src", vList[0]);myVid = videojs('e_video', options, function onPlayerReady() {this.play();this.on('ended', function() {videojs.log('Awww...over so soon?!');if (curr >= vList.length) {curr = 0; //重新循环播放}myVid.src(vList[curr]);myVid.load();console.log("curr1: " + curr);curr++;console.log("curr2: " + curr);});})curr++;console.log("curr: " + curr)
})$(document).on("click",".qiehuan",function(){vList = ["video/dengguan.mp4","video/dengguan.mp4"];$("#source").attr("src", vList[0]);//e_video_html5_api标签id 是在#e_video 内部,用于展示视频$("#e_video_html5_api").attr("src", vList[0]);})$(document).on("click",".fanhui",function(){vList = ["video/neitou.mp4","video/neitou.mp4"];$("#source").attr("src", vList[0]);//e_video_html5_api标签id 是在#e_video 内部,用于展示视频$("#e_video_html5_api").attr("src", vList[0]);})</script>
</html>
2、内容展示
3.当用谷歌浏览器打开网址播放视频时,可能会遇到的问题,视频不能自动播放,解决方案
第一步,点击箭头标注的按钮
第二步:点击 网站设置
第三步:找到关于“声音”的权限 :设置成允许
第四步:在原网址上打开会出现重新加载的按钮 ,点解确认就可以了