Question

我找到了解决方案;检查下面的编辑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();
  });

});

当我点击bg时，视频会发生变化但新视频显示持续时间为0:00且控件无法正常工作。如果我可以让它工作，我会隐藏 - 取消隐藏视频并相应地更改src网址。我很欣赏一些见解。

编辑 - 我发现了问题，但我不知道为什么会发生这种情况：如果我把我要改成的视频（在这种情况下是'test2.mp4'）放在html目录中，它的工作原理就好了。但如果它在其他任何地方都不起作用。好像它不能再认识这条路了。任何想法为什么会这样？

edit2-好我发现它与反斜杠“\”有关。当我用文件路径中的“/”替换它时，它工作。虽然“\”在原始html中工作正常（我的意思是当它直接在视频标签中作为src =“C：\ users ...”）

Answer 1

您可以在此帖子中找到solution与您相同的问题。

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

祝你好运！

在javascript / jquery中更改视频源

1 个答案: