[英]Loading an HTML5 video player from Array
我有一系列視頻,我想將它們加載到頁面上當前設置的視頻播放器中。 這是我所擁有的:
var current = 0;
var videos = ["01", "02", "03", "04"];
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex ;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
function shuffleAll(){
shuffle(videos);
}
function loadVideo(){
var video = document.getElementById('video');
var mp4 = document.getElementById('mp4');
d = new Date();
mp4.src = "videos/" + videos[current] + '.mp4';
alert(mp4.src);
video.load();
video.play();
}
而我的HTML:
<body onLoad="shuffleAll()">
<a href="" onClick="javascript:loadVideo();">Load Video</a><br>
<video id="video" controls width="560">
<source id="mp4" type="video/mp4" />
</video>
</body>
但是我單擊我的“加載視頻”按鈕,它沒有任何作用。 我想念什么?
您需要暫停視頻,然后加載視頻然后播放。 真的,這是一個棘手的兒子。 您需要將監聽器添加到視頻按鈕(通過隨機化或其他方式更改源)
videobutton.addEventListener("click", function(event) {
video.pause();
mp4.setAttribute('src', 'videos/' + videos[current] + '.mp4');
video.load();
video.play();
},false);
這將起作用。
var current = 0;
var videos = ["01", "02", "03", "04"];
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex ;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
function shuffleAll(){
shuffle(videos);
}
function loadVideo(){
var video = document.getElementById('video');
var mp4 = document.getElementById('mp4');
d = new Date();
video.pause();
mp4.setAttribute('src', 'videos/' + videos[current] + '.mp4');
video.load();
video.play();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.