簡體   English   中英

從數組加載HTML5視頻播放器

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM