<!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.当用谷歌浏览器打开网址播放视频时，可能会遇到的问题，视频不能自动播放，解决方案
第一步，点击箭头标注的按钮
第二步：点击 网站设置
第三步：找到关于“声音”的权限 ：设置成允许
第四步：在原网址上打开会出现重新加载的按钮 ，点解确认就可以了
