如何成對隨機化？

Question

我試圖隨機化一些視頻，它們都是.webm和.mp4。

我有兩個各視頻例如vid1.webm和vid1.mp4

我想有視頻隨機，並在同一時間進入視頻標籤拉兩個。

Safari瀏覽器不支持.webm所以這就是爲什麼我想有.MP4作爲備份和既需要隨機插入點擊瀏覽器。

我從一個數組加載它們，也無法弄清楚的文件夾結構應該如何上市了，我真的很想讓他們在一個數組我在幾百

var randomImage = new Array(); 

randomVideo[0] = "videos/1.webm/ or mp4"; //not sure how to do the file structure 
randomVideo[1] = "videos/2.webm/ or mp4"; // 
randomVideo[2] = "videos/3.webm/ or mp4"; // 

//trying to figure out this part 

$(function() { 
    $('a.click').click(function(e) { 
     e.preventDefault(); 
     var number = Math.floor(Math.random()*randomVideo.length); 
     $(this).html('<source src="'+randomVideo[number]+'" />'); 
    }); 
}); 

$(function() { 
    $('a.click').click(function(e) { 
     e.preventDefault(); 
     var number = Math.floor(Math.random()*randomVideo.length); 
     $(this).html('<source src="'+randomVideo[number]+'" type="video/mp4" />) 
    } 
}) 

正在加載

html

<a href="#" class="click"> 
    <section> 
     <video controls autoplay> 
      <script> 
       randomVideo() 
      </script> 
     </video>  
    </section> 
</a> 

如果有人能幫我弄明白這一點，將不勝感激！ 想不通，還在學習。

Answer 1

您有多個問題。首先你的數組名稱不匹配（randomImage和randomVideo）。不知道你爲什麼鉤了兩次點擊事件。一種方法是將路徑的公共部分存儲在數組中，然後連接文件結尾。此外，我不知道你想用img標籤做什麼...

無論如何，下面的代碼應該可以幫助你，如果我已經理解你正在嘗試做的事情。

var randomVideo = new Array(); 
// define your common video paths here 
randomVideo[0] = "videos/1"; 
randomVideo[1] = "videos/2"; 
randomVideo[2] = "videos/3"; 

function randomiseVideos() { 
     var number = Math.floor(Math.random() * randomVideo.length); 
     $('#myvid').empty(); // clean up from last time 
     // now add 2 sources (will fall back appropriately depending on client support) 
     $('#myvid').append('<source src="' + randomVideo[number] + '.webm" type="video/webm">'); 
     $('#myvid').append('<source src="' + randomVideo[number] + '.mp4" type="video/mp4">'); 
} 

$(function() { 
    // Randomise on page load 
    randomiseVideos(); 
    // handle click on test link 
    $('a.click').click(function (e) { 
     e.preventDefault(); 
     randomiseVideos(); 
    }); 
}); 

HTML：

<a href="#" class="click">Test Link</a> 
<section> 
    <video id="myvid" width="320" height="240" controls autoplay></video> 
</section> 

JS fiddle demo

Answer 2

視頻元素支持多個來源https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

一個非常簡單的解決辦法是將存儲陣列中的視頻對象的列表：

var videos = [ 
    [{type:'mpg', 'src':'blah.mpg'}, {type:'webm', 'src':'blah.webm'}], 
    [{type:'mpg', 'src':'blah2.mpg'}, {type:'webm', 'src':'blah2.webm'}], 
]; 

... 

var video = videos[randomIndex]; 

並用它來輸出源，如：

<video controls> 
    <source src="blah.mpg" type="video/ogg"> 
    <source src="blah.webm" type="video/mp4"> 
    Your browser does not support the <code>video</code> element. 
</video>