显示几个背景视频

Display several background videos

本文关键字：几个 背景 视频 显示      更新时间：2023-09-26

我试图用Javascript和createElement方法显示不同的背景视频，以便只有一个视频标记节点。点击一个链接，视频显示得很好，但其他视频则不然。我还检查了DOM元素，并且两个<video>+<source>标记的两个元素（id和src）都切换得很好（movie1>movie2）。看起来浏览器会保留第一个视频，即使DOM元素中的元素已经被很好地修改了。

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

你有一些逻辑问题。。。请在JsFiddle上检查这段代码，它似乎可以根据您的需要工作。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>
相关文章：