ビデオの<source>要素を動的に変更します。

Question

html、css、javascriptのみを使用してゲームを作成しました。ゲームが終了するたびにビデオを再生しようとしています。私はこれらのビデオをフォルダに持っていて、 "video1.mp4"、 "video2.mp4"などと呼ばれています。 <video>要素の<source>要素を動的に作成することを考えましたが、間違ったことをしています。すべての手がかりは？

<div id="videoBox"> 
    <video id="idVideo" width="320px" height="176px"> 
    <script> 
    var newEle = document.createElement("source"); //creates <source> element 

    var changingSource = '"videos/video' + counter + '.MP4"'; 
    // the previous line creates the names of the video files using a variable (counter) 
    newEle.src = changingSource; //uses those names 
    newEle.type = "video/mp4"; //defines type of file 
    var ele = document.getElementById("idVideo"); //handle to the video element 
    ele.appendChild(newEle); //appending the <source> to the <video> element 
    </script> 
    </video> 
</div> 
<br> 

そして、ゲームが終了したときに実行される関数の内部：

var videoVar = document.getElementById(idVideo); //the previous line gets a handle to the video file 

videoVar.play(); //starts playing the video 

Answer 1

あなたは、次のコード行に引用符の内側に引用符を使用している：

var changingSource = '"videos/video' + counter + '.MP4"'; 

に試してみてください次のように変更してください：

var changingSource = 'videos/video' + counter + '.MP4'; 

もちろん、再生したいビデオを追跡するカウンタ変数が必要ですが、ソートされていると思います。

Answer 2

さらに、ソース要素をHTMLに配置することをお勧めします。次に、srcプロパティを変更してゲームが終了するたびに再生する必要があります。 追加したソースがドキュメント内で1回だけ実行されることに気付かなければなりません。