功能
当用户触摸<button>
时,将播放视频列表中的视频。视频播放完毕后,第3页将fadeIn()
。延迟5秒后,整个程序将通过location.reload();
执行刷新。之后,当用户触摸<button>
并且整个循环再次重复时,将再次播放来自视频列表的另外1个视频。
播放的视频将遵循声明的数组
中所述的顺序var videolist=["video#3", "video#2", "video#1", "video#4"];
因此,流程是:
我做了什么:
我做了一个start(),它将播放视频阵列中的视频,并在每个播放视频的末尾递增每个videoIndex。
代码:
var videoList = ["lib/video/A.mp4", "lib/video/B.mp4", "lib/video/C.mp4", "lib/video/D.mp4", "lib/video/E.mp4", "lib/video/F.mp4", ];
var videoIndex = 0;
var video_increment = [];
function StartTest() {
$('#C_Main').fadeOut();
//play fixed sequence "random" video
$('#Chl_Selection').fadeIn();
$("#Chl_Selection_Video").jPlayer({
ready: function() {
//console.log("currentPlaying " + videoList[videoIndex]);
$("#Chl_Selection_Video").jPlayer("setMedia", {
m4v: videoList[videoIndex]
}).jPlayer("play");
},
ended: function() {
//after video has played, increment the videoIndex
videoIndex++;
if (videoIndex >= videoList.length) {
//console.log("Next" + videoIndex);
videoIndex = 0;
}
console.log("videoIndex" + videoIndex);
//push value of videoIndex into empty array for temporary store.
video_increment.push(videoIndex);
//set local storage
localStorage.setItem("video_increment", video_increment);
//Display Thank you page
$('#Chl_Selection').fadeOut();
$('#Chl_ThankYou').fadeIn(function() {
setTimeout(function() {
location.reload();
}, 5000);
});
},
swfPath: "javascript",
muted: true,
loop: true,
supplied: "webmv, ogv, m4v",
size: {
width: 1080,
height: 1920
}
});
}
&#13;
.Test {
position: absolute;
width: 1080px;
height: 1740px;
left: 0px;
top: 180px;
z-index: 100;
outline: 0;
border: 0;
background: transparent;
}
&#13;
<script src="javascript/jquery-1.11.3.min.js"></script>
<script src="javascript/jquery-ui-1.10.3.min.js"></script>
<script src="javascript/jplayer.playlist.min.js"></script>
<script src="javascript/jquery.jplayer.min.js"></script>
<div id="C_Main" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; z-index=1; top:0px; left:0px;">
<button class="Test" onclick="StartTest()"></button>
<div id="Chl_Selection" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=2; top:0px; left:0px; margin:auto;">
<!--Video Div-->
<div id="Chl_Selection_Video" style="position:absolute;"></div>
</div>
<div id="Chl_ThankYou" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=3; top:0px; left:0px; margin:auto;">
<!-- TEST IMAGE -->
<img id="ThankYou" src="lib/img/Chl_ThankYou.png" style="position:absolute; left:0px; top:0px; width: 1080px; height:1920px;" />
</div>
&#13;
问题:
此时,我可以显示播放初始视频后的videoIndex增量。但是,当整个程序刷新时,我无法显示下一个视频。它仍将显示播放的阵列列表中的第一个视频。
我也尝试过使用localStorage.setItem("video_increment", video_increment);
因此,我想请求帮助,我在现有代码中遗漏了什么。
答案 0 :(得分:0)
我将您的代码更改为实际使用localStorage
,以便在重新加载后不会丢失当前索引:
var videoList = ["lib/video/A.mp4", "lib/video/B.mp4", "lib/video/C.mp4", "lib/video/D.mp4", "lib/video/E.mp4", "lib/video/F.mp4", ];
// Retrieve last index from localStorage. We parse it to integer,
// since values are serialized in strings when stored in localStorage
var videoIndex = parseInt(localStorage.getItem('currentIndex')) || 0;
function StartTest() {
$('#C_Main').fadeOut();
//play fixed sequence "random" video
$('#Chl_Selection').fadeIn();
$("#Chl_Selection_Video").jPlayer({
ready: function() {
//console.log("currentPlaying " + videoList[videoIndex]);
$("#Chl_Selection_Video").jPlayer("setMedia", {
m4v: videoList[videoIndex]
}).jPlayer("play");
},
ended: function() {
//after video has played, increment the videoIndex
videoIndex++;
if (videoIndex >= videoList.length) {
//console.log("Next" + videoIndex);
videoIndex = 0;
}
console.log("videoIndex" + videoIndex);
//set local storage
localStorage.setItem("currentIndex", videoIndex);
//Display Thank you page
$('#Chl_Selection').fadeOut();
$('#Chl_ThankYou').fadeIn(function() {
setTimeout(function() {
location.reload();
}, 5000);
});
},
swfPath: "javascript",
muted: true,
loop: true,
supplied: "webmv, ogv, m4v",
size: {
width: 1080,
height: 1920
}
});
}