从Array加载HTML5视频播放器

Loading an HTML5 video player from Array

本文关键字：视频 播放器 HTML5 加载 Array      更新时间：2023-09-26

我有一组视频，我想把它们加载到当前页面上的设置视频播放器中。这是我的：

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();
 }
相关文章：