- HTML代码
<body>
<video type="video/mp4" src="" disablePictureInPicture
controlsList="nodownload" autoplay="" style="width: 400px; height: 300px;" id="e_video" preload="metadata">
</video>
</body>
2.css代码
video {
object-fit: fill;
}
- jquery代码
<script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
<script>
//静态用于演示
$(function() {
var video_list = [
"img/huadong1/moxing.mp4",
"img/huadong1/moxing.mp4"
];
var video_index = 0;
var video_player = null;
var onVideoEnded = function(){
console.log("video ended");
if(video_index < video_list.length - 1){
video_index++;
}
else{
video_index = 0;
}
console.log("playing:"+ video_list[video_index]);
video_player.setAttribute("src", video_list[video_index]);
video_player.play();
}
var onload = function(){
console.log("body loaded");
video_player = $("video")[0];
video_player.setAttribute("src", video_list[video_index]);
video_player.addEventListener('ended',onVideoEnded);
video_player.play();
};
onload();
});
</script>
