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

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

因此： 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

來源

2016-05-15 user1204493

HTML ID video元素表示「video_Holder」，但JS表示「video_holder」。需要匹配。也...不清楚第一張圖片與休息的關係，但是如果第二張「隨機」圖片，說明和視頻都是相關的，則可以將它們存儲爲JS對象而不是單獨的數組。每個作爲同一對象的屬性，例如'item.image'，'item.description'，'item.video' ...多個圖像或視頻可能在數組中...'item.video [1]'。 ...如果一切都是隨機的和無關的，那麼忽略:)最後 - 你將imgnum設置爲images.length（好），但是將它硬編碼爲37（不需要）。 – mc01

謝謝mc01。我糾正了錯配。這是我進入堆棧溢出時遇到的問題。我想將視頻添加到我的陣列或圖像和說明中。隨機調用時，它會顯示/顯示說明和圖像。他們是相關的。我不知道太多的編碼，所以我需要使用對我有用的內容，因爲上面的代碼對圖像和照片有效。我不知道如何讓視頻顯示或將其添加到我的陣列。不知道我需要做什麼。再次感謝您試圖幫助我。 – user1204493

mc01-我在這裏做一個快樂的舞蹈！最後，在試圖找出這一點後的幾天裏，它正在工作。這要感謝你的解釋。我無法相信我實際上開始瞭解這些東西的一小部分。 :-D它當然可能是導致大量頭部撞擊的原因。再次感謝，Rachel – user1204493

我可以稍後添加更詳細的答案，但使用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'>";

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

來源

2016-05-18 22:50:12 mc01

mc01：我想知道你是否可以回答「爲什麼」這個問題。當我使用'videoHolder.innerHTML =「」;'第一個視頻運行任何其他隨機視頻會產生黑屏。（當然給了我一些頭撓一會兒）然後我試着'videoHolder.src = videos [useRand];'和黑屏消失了。一切似乎現在工作。你能告訴我第一個代碼與第二個代碼有什麼問題嗎？謝謝。 -Rachel – user1204493

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

回答

相關問題