实习遇到的问题，记录：
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/css/video-js.css" />
<script type="text/javascript" src="/js/video.min.js"></script>
<script type="text/javascript" src="/js/videojs-contrib-hls.js"></script>
</head>
<body>
<div id="shipin">
<div id="video" style="width:900px;height:500px;margin-top:20px;margin-left: 20px;">
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" data-setup="{}" height=500px width=900px>
</video>
</div>
<input type="text" style="display:none"id="vid" th:value="${videoArray}">
</div>
</body>
<script>
var url = document.getElementById("vid").value;
var vList = url.split(",");// 初始化播放列表
var vLen = vList.length;
var curr = vLen-1;//因为取路径的时候是倒序，所以选择从后向前播
var video = document.getElementById("example_video_1");
var options = {
controls: true,
preload: 'auto',
loop: false, //注意：此地方一定要设置为false，不然会循环播放同一个视频
};
var player = videojs('example_video_1', options, function onPlayerReady() {
play();
video.addEventListener('ended', function(){
play();
});
});
function play() {
player.src({
src: vList[curr],
type: 'application/x-mpegURL'//在重新添加视频源的时候需要给新的type的值
})
video.load();
video.play();
curr--;
if(curr < 0){
curr = vLen-1 ; //重新循环播放
}
}
</script>
</html>
3962
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
