【发布时间】：2014-02-09 08:10:35
【问题描述】：
我找到了解决办法；检查下面的编辑 1 和 2
我已经阅读了很多关于这个问题的问题，但大多数答案都是“确保加载新视频”。 你可以在下面看到我的代码，我正在这样做。
我在这个例子中想要做的是有某种彩色背景（“bg”div），当点击它时，我想在顶部显示一个视频。最终我想要实现的是在页面上有多个图像，我想根据点击的图像将视频覆盖在所有内容之上。我仍然是 html 和 js 的菜鸟，所以也许我看不到明显的东西。
这是我用来创建红色 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();
});
});
当我点击背景时，视频会发生变化，但新视频的持续时间显示为 0:00，并且控件无法正常工作。如果我能让这个工作，我会隐藏 - 取消隐藏视频并相应地更改 src url。我将不胜感激。
edit-我发现了问题，但我不知道为什么会这样：如果我将我想更改的视频（在本例中为“test2.mp4”）放在 html 目录中，它就可以正常工作.但如果它在其他任何地方，它就不起作用。仿佛再也认不出那条路了。任何想法为什么会这样？
edit2- 好的，我发现它与反斜杠“\”有关。当我在文件路径中用“/”替换它时，它起作用了。 “\”在原始 html 中可以正常工作（我的意思是当它直接在视频标签中作为 src="C:\users..."）
【问题讨论】：
标签： javascript jquery html css video