如何動態替換HTML5視頻src

我有一個項目，我有幾個視頻，我想動態加載到頁面。我的HTML是相當簡單的一個視頻標籤如何動態替換HTML5視頻src

<video controls preload width="520" height="350" id="video"> 
<source src="videos/video0.mp4" type="video/mp4" id="video_source"> 
</video> 

<div id="playlist"> 
    <a href="videos/video1.mp4">Video File Tomorrow</a> 
    <a href="videos/video2.mp4">Video File Tomorrow</a>    
</div>

我只使用MP4文件，因爲這個項目只需要在Safari中的功能。我試過2個JS解決方案，並似乎都產生不同的問題

解決方案1

$("#playlist a").click(function(){ 
    var video_source_link=$(this).attr("href"); 
    document.getElementById("video_source").setAttribute("src",video_source_link); 
    document.getElementById("video").load(); 
    document.getElementById("video").play(); 
    return false; 
});

在這個版本中更新JS源標記的src屬性，但不加載視頻。

解決方案2

$("#playlist a").click(function(){ 
     var video_source_link=$(this).attr("href"); 
     document.getElementById("video_source").setAttribute("src",video_source_link); 
     document.getElementById("video_source").load(); 
     document.getElementById("video_source").play(); 
     return false; 
});

在這個版本的視頻加載到一個空白的窗口，當我點擊後退按鈕的Safari，出現以下錯誤WebKit2WebProcess.exe遇到了問題，需要崩潰關閉

來源

2012-04-23 user1352096

[上HTML5視頻標籤改變源（可能重複http://stackoverflow.com/questions/5235145/changing-source-on-html5 - 視頻標籤） – Blazemonger 2013-12-11 19:00:05

嘗試改變視頻標籤而不是內在的小孩源標籤：

$("#video")[0].src = $(this).attr("href");

來源

2014-07-22 18:12:48

首先，CHEC k您的video_source_link。如果你是video_source_link是正確的，我建議刪除這條線document.getElementById("video").play(); in soultion 1.或者如何刪除controls preload在視頻標籤？以下代碼適用於我。

HTML

<video width="320" height="240" autoplay> 
    <source id="video_path" src="" type="video/mp4"> 
</video>

$('#video_path').attr('src', 'path'); 
$('video').load();

來源

2017-02-14 00:42:28 firepunch

如何動態替換HTML5視頻src

回答

相關問題