0

I'm trying to display different background videos with Javascript and with createElement method to only have one video tag node. By clicking on a link, the video is well displayed but not the others. I also checked the DOM Elements and both elements (id and src) of both <video> + <source> tags have been well switched (movie1 > movie2). It looks like the browser keep the first video even if the elements have been well modified in the DOM Elements.

<head>
    <script>
        var movieNow = "";
        function playVideo(movie, mp4) {
            if (movieNow!="") {
                document.getElementById(movieNow).pause();
                document.getElementById(movieNow).style.display="none";
                document.getElementById(movieNow).id = movie;
                document.getElementById('mysource').src = "videos/"+mp4+".mp4";
                document.getElementsByTagName("Video").play();
                    document.getElementsByTagName("Video").style.display="block";
            } else {
                bckMovie = document.createElement("video");
                bckMovie.id = movie;
                bckMovie.className = "myvideo";
                bckMovie.innerHTML = "<source src='videos/"+mp4+".mp4' type='video/mp4' id='mysource'>";
                document.body.appendChild(bckMovie);
                document.getElementById(movie).style.display="block";
                document.getElementById(movie).play();
            }
            movieNow = movie;
        }
    </script>
<body>
    <a href="javascript:playVideo('movie1', 'movie123')">Movie 1</a>
    <a href="javascript:playVideo('movie2', 'movie456')">Movie 2</a>
    ...
</body>
Mr Lister
  • 42,557
  • 14
  • 95
  • 136
user6113111
  • 1
  • 1

1 Answers1

0

Well you have some logical problems... Please examine this code at JsFiddle, that seems works as you need. https://jsfiddle.net/o5fdqurw/2/

<head>
    <script>
    var movieNow = "";
     function playVideo(mp4) {
        var movieNow = document.getElementById("movie");
        if (movieNow !== null) {
            movieNow.pause();
            movieNow.style.display="none";
            document.getElementById('mysource').src = "videos/"+mp4+".mp4";
            movieNow.play();
            movieNow.style.display="block";
        } else {
            bckMovie = document.createElement("video");
            bckMovie.id = "movie";
            bckMovie.className = "myvideo";
            bckMovie.innerHTML = "<source src='videos/"+mp4+".mp4' type='video/mp4' id='mysource'>";
            document.body.appendChild(bckMovie);
            document.getElementById("movie").style.display="block";
            document.getElementById("movie").play();
         }
     }
     movieNow = movie;
</script>
<body>
    <a href="javascript:playVideo('movie123')">Movie 1</a>
    <a href="javascript:playVideo('movie456')">Movie 2</a>
    ...
</body>
tanaydin
  • 4,692
  • 23
  • 42
  • Thanks for your answer Tanaydin but I always have the same issue. The first click displays well the video but not the other clicks. It looks like changing the source of the video is not impacted. – user6113111 Mar 25 '16 at 15:16
  • hi please check http://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag or http://stackoverflow.com/questions/12151606/setattribute-and-video-src-for-changing-video-tag-source-not-working-in-ie9 – tanaydin Mar 27 '16 at 19:25