问显示多个背景视频
EN

Stack Overflow用户

提问于 2016-03-25 16:52:17

回答 1查看 43关注 0票数 0

我正在尝试使用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>

javascript

html

html5-video

回答 1

Stack Overflow用户

发布于 2016-03-25 17:09:30

你有一些逻辑上的问题。请在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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36216823

复制

相似问题

问显示多个背景视频
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问显示多个背景视频EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问显示多个背景视频
EN