在javascript中添加和顯示隨機數組中的對象視頻

Question

我有一個iOS應用程序，當前允許用戶點擊圖像。然後向用戶顯示陣列中的隨機圖像以及圖像的描述。我想添加一個隨機視頻，這是一個圖像的例子。

因此： 1.用戶點擊照片的圖像。 2.顯示一張新的隨機照片和說明。 3.顯示關於照片的特定視頻。

前兩部分（圖像和說明）正在工作，但我不知道如何獲取視頻文件來顯示。我下面嘗試：

HTML元素來保存視頻顯示：

<video id="video_holder"> 
 

 
</video>

<!-- This script creates random photos along with descriptions when clicked. I want to add random videos too. --> 
 
<!-- Begin--> 
 

 
< script type = "text/javascript" > 
 
    var rand1 = 0; 
 
var useRand = 0; 
 

 
var descriptions = []; 
 
var videos = []; 
 

 

 
var descriptionHolder = document.getElementById('description_holder');//image description 
 
var videoHolder = document.getElementById('video_holder');//add video var 
 

 

 

 
//Starter 
 
function swapPic() { //call a random image when image clicked 
 

 
    var imgnum = images.length = 37; //Get first 38 of array starts at 0 so subtract 1 to get all elements or number to designate num elements. 
 

 
    do { 
 
    var randnum = Math.random(); 
 

 
    rand1 = Math.round((imgnum - 1) * randnum) + 1; 
 
    } while (rand1 == useRand); 
 
    useRand = rand1; 
 
    document.randimg.src = images[useRand].src; 
 
    descriptionHolder.innerHTML = descriptions[useRand]; //photo description for first 38 photos 
 
videoHolder.innerHTML = videos[useRand]; //here is where I'm lost! 
 
} 
 

 
    
 

 
    
 

 
images = new Array; 
 
images[1] = new Image(); 
 
images[1].src = "images/Photo1.png"; 
 
descriptions[1] = 「A lovely photo about….」; 
 

 

 
images[2] = new Image(); 
 
images[2].src = "images/Photo2.png"; 
 
descriptions[2] = 「Another photo description here…」;;

我已經嘗試添加另一個類別我的數組，但它不」工作。就像這樣：

images[1] = new Image(); 
 
images[1].src = "images/Photo4.png"; 
 
descriptions[1] = 「More words of description here…「; 
 
videos[1] = 「videos/myvideo1.mp4」;

我也試過這樣：

images = new Array; 
 
images[1] = new Image(); 
 
images[1].src = "images/Photo1.png"; 
 
descriptions[1] = 「photo description here…」; 
 
videos[1].src = "images/videos/myVideo.mp4";

我敢肯定，你們誰知道這東西都在猜測， 「她到底在做什麼？」我感謝你的耐心。預先感謝您的幫助。我在游泳池的盡頭游泳，需要lifepreserver。 -Rachel

Answer 1

我可以稍後添加更詳細的答案，但使用innerHTML的videoHolder只會將視頻文件名作爲文本放入<video>標記中。

<video> 
    images/videos/myvideo.mp4 
</video> 

正如你已經發現，這是行不通:)

您需要更改videoHolder元素的src屬性：

<video id="video_holder" src="images/videos/myvideo.mp4"> 

或添加<source>節點W/（此路線允許多種文件類型：mp4，ogv，webm等）：

<video id="video_holder"> 
    <source src="images/videos/myvideo.mp4" type="video/mp4"> 
    <source src="images/videos/myvideo.webm" type="video/webm> 
</video> 

在JS最簡單的方法是：

videoHolder.src = videos[useRand]; 

或

videoHolder.innerHTML = "<source src='" + videos[useRand] + "' type='video/mp4'>"; 

（注意，沒有測試過這一點，但應該希望你指出正確的方向）