JavaScriptのオブジェクトのランダムな配列からビデオを追加して表示する

Question

私は現在、ユーザーが画像をタップできるiOSアプリを持っています。配列のランダムな画像と画像の説明がユーザに表示されます。私は画像の例であるランダムなビデオを追加したいと思います。

So： 1.ユーザーは写真の画像をタップします。 2.新しいランダム写真が説明と共に表示されます。 3.写真に関する特定のビデオが表示されます。

最初の2つの部分（画像と説明）は機能していますが、ビデオファイルを表示する方法はわかりません。下記の私の試み：ビデオディスプレイ保持する

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…”;;

を「私は私の配列に別のカテゴリを追加しようとしましたが、それはdoesnの仕事。このように：私はこのようなものを知っているあなたの人々が不思議に思っていると確信している

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";

、：

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

私はこれをも試してみました「一体何してるの？」私はあなたの忍耐に感謝します。ご協力いただきありがとうございます。私はプールの深いところで泳いでいて、ライフセーバーが必要です。 -Rachel

Answer 1

innerHTMLのvideoHolderを使用すると、ビデオファイルのファイル名は<video>タグの中にテキストとして保存されます。

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

あなたが発見したように、これは動作しません:)

あなたはvideoHolder要素のsrc属性を変更する必要があります。

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

OR/wの<source>ノードを追加代わりにファイル名（このルートでは複数のファイルタイプ、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'>"; 

（注意、これをテストしていませんが、うまくいけば、正しい方向にあなたを指している必要があります）