不能與JS

動態顯示HTML5視頻我有一個表，看起來像這樣：不能與JS

+------------+---------+ 
| Name | View | 
+------------+---------+ 
| 1.mp4  | X | 
| 2.mp4  | X | 
+------------+---------+

X的視圖按鈕。

當用戶點擊任何視圖按鈕時，我想以模式顯示相應的視頻。我正在使用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頁面中，並且以這種方式工作，我找不出爲什麼它不能動態地工作。

來源

2017-04-03 Piyush Shrivastava

你可以上傳你的代碼（即）樣品頁 – Ram

@Ram代碼已經張貼在的問題。 – Archer

您是否檢查過瀏覽器控制檯的錯誤？ src可能看起來正確，但如果路徑不正確，它將在瀏覽器控制檯中返回404錯誤。 – NewToJS

直接將視頻源這樣的...

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>

來源

2017-04-03 10:14:11 Archer

回答

相關問題