更改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

回答

相关问题