更改javascript中的視頻源/ jquery

我找到了解決方案;檢查下面的編輯1和2更改javascript中的視頻源/ jquery

我已閱讀關於此問題的許多問題，但大多數答案都說「確保您加載新視頻」。你可以在下面看到我的代碼，我正在這樣做。

我在這個例子中試圖做的是有某種顏色的背景（「bg」div），當它點擊時我想在上面顯示一個視頻。最終，我想用這個來實現的是在頁面上有多個圖像，並且我想根據所點擊的圖像覆蓋所有內容上的視頻。我仍然是html和js的noob，所以也許我看不到明顯的。

下面是我用來創建一個紅色的500x500背景的代碼，在上面加載test1.mp4。這工作得很好。

<!DOCTYPE html> 
<html> 
<head> 

<style> 
#video{ 
    z-index:1; 
} 
#bg { 
    position:absolute; 
    z-index:-1; 
} 
</style> 
</head> 

<body> 
<div id="bg" style="background-color:#900;height:500px;width:500px;" ></div> 
<div> 
    <video id="video" width="480" controls> 
    <source id="vidSrc" src="C:\Users\Biller\test videos\test1.mp4"; type="video/mp4"> 
    Your browser does not support the video tag. 
    </video> 
//the below script creates pause-play controls when I click on the video 
    <script> 
    var myVideo=document.getElementById("video"); 
    myVideo.addEventListener('click',function(){ 
    if (myVideo.paused) 
    myVideo.play(); 
    else 
    myVideo.pause(); 
    }); 
    </script> 
</div> 

<script src="jquery-1.11.0.min.js"></script> 
<script src="myJQuery.js"> </script> 

</body> 
</html>

然後我用這個jQuery腳本（myJQuery.js）更改視頻點擊紅色BG時：

$(document).ready(function() { 

    $("#bg").click(function(){ 
    $("#vidSrc").attr("src","C:\Users\Biller\test videos\test2.mp4"); 
    $("#video")[0].load(); 
    }); 

});

當我點擊BG視頻的變化，但新的視頻節目0:00持續時間和控制不起作用。如果我能得到這個工作，我會隱藏 - 取消隱藏視頻並相應地更改src url。我會很感激一些見解。

編輯 - 我發現了這個問題，但我不知道爲什麼會發生這種情況：如果我在html目錄中放入要更改的視頻（在本例中爲'test2.mp4'），它工作得很好。但如果它在其他任何地方都不起作用。彷彿它不能識別路徑了。任何想法，爲什麼這可能是？

edit2-好吧，我發現它與反斜槓「\」有關。當我用文件路徑中的「/」替換它時，它工作正常。雖然（我的意思是當它直接在視頻標籤中作爲src =「C：\ users ...」時，「\」工作正常）

來源

2014-02-09 Billakosama

您可以在此處查找solution與您的問題相同。

http://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag

祝你好運！

來源

2014-02-09 08:53:34

但他描述的問題並未出現在我的電腦上。加載函數在他提供的鏈接上工作得很好。 - 我使用鉻順便說一句 – Billakosama

更改javascript中的視頻源/ jquery

回答

相關問題