は、私はこのようになりますテーブルを持っているJS

Question

で動的にHTML5のビデオを表示することはできません。

ユーザーがいずれかのビューボタンをクリックすると、対応するビデオをモーダルで表示します。私はそのためにhtml5ビデオタグを使用しています。ビデオタグでは、srcを動的に提供したいと考えています。

srcは動画の名前です。私はこれにjavascriptを使用しています。

HTML：

Xボタン：

<a data-toggle="modal" data-id={{name}} href="#Modal" class="preview">X</a> 
<!--{{name}} is 1.mp4--> 

モーダル：

... 
<div class="modal-body"> 
<video width="548" height="455" controls> 
<source id="vsrc" type="video/mp4"> 
Your browser does not support video playback. 
</video> 
</div> 
... 

JS：

var videoName = $(this).data('id'); //This is correct 
document.getElementById('vsrc').src = videoName; 

私は、ページのソースコードをチェックし、 src i

<source id="vsrc" type="video/mp4" src="1.mp4"> 

ただし、ビデオはページに表示されず、空のコンテナと無効なビデオコントロールボタンが表示されます。

このソースコードを実際のHTMLページに貼り付けてみましたが、そのように動作しましたが、なぜ動的に動作しないのかわかりません。直接このようなビデオソースを設定

Answer 1

...

var vid = document.getElementById('vid'); 
 

 
vid.src = "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"; 
 
vid.play();

<div class="modal-body"> 
 
    <video id="vid" width="548" height="455" controls> 
 
    Your browser does not support video playback. 
 
    </video> 
 
</div>