I found the solution; check edit 1 and 2 below
I've read many questions on this matter but most answers say "make sure you load the new video". You can see my code below and I'm doing this.
What I'm trying to do in this example is have some kind of colored background (the "bg" div) and when its clicked I want to display a video on top. Ultimately what I want to achieve with this is have multiple images on the page and I want to overlay a video on top of everything according to the image tha was clicked. I'm still a noob in html and js so maybe I can't see the obvious.
Here's the code I use to create a red 500x500 background an load the test1.mp4 on top. This works just fine.
<!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>
then I use this jquery script (myJQuery.js) to change the video when the red bg is clicked:
$(document).ready(function() {
$("#bg").click(function(){
$("#vidSrc").attr("src","C:\Users\Biller\test videos\test2.mp4");
$("#video")[0].load();
});
});
When I click on the bg the video changes but the new video shows 0:00 on duration and the controls are not working. If I can get this to work I would then hide-unhide the video and change the src url accordingly. I'd appreciate some insight.
edit- I found the problem but I don't know why it's happening: If I put the video I want to change to (in this case 'test2.mp4') in the html directory it works just fine. But if it's anywhere else its not working. As if it cant recognize the path anymore. Any ideas why that may be?
edit2- Ok I found out it has something to do with the backward slash "\". When I replaced that with "/" in the file path, it worked. The "\" works fine when it's in the original html though (I mean when its directly in the video tag as src="C:\users...")
