Fatal编程技术网

Javascript 显示多个背景视频

javascript html

Javascript 显示多个背景视频,javascript,html,html5-video,Javascript,Html,Html5 Video,我正在尝试使用Javascript和createElement方法显示不同的背景视频，以便只有一个视频标记节点。通过点击一个链接，视频可以很好地显示出来，但其他视频则无法显示。我还检查了两个+标记的DOM元素和两个元素（id和src）是否已正确切换（movie1>movie2）。看起来，即使DOM元素中的元素已被很好地修改，浏览器也会保留第一个视频 <head> <script> var movieNow = ""; functio

我正在尝试使用Javascript和createElement方法显示不同的背景视频，以便只有一个视频标记节点。通过点击一个链接，视频可以很好地显示出来，但其他视频则无法显示。我还检查了两个
+
标记的DOM元素和两个元素（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>


var movieNow=“”；
功能播放视频（电影，mp4）{
如果（movieNow！=“”）{
document.getElementById（movieNow.pause（）；
document.getElementById（movieNow.style.display=“无”；
document.getElementById（movieNow）.id=movie；
document.getElementById（'mysource'）.src=“videos/”+mp4+”.mp4”；
document.getElementsByTagName（“视频”）.play（）；
document.getElementsByTagName（“视频”）.style.display=“块”；
}否则{
bckMovie=document.createElement（“视频”）；
bckMovie.id=电影；
bckMovie.className=“myvideo”；
bckMovie.innerHTML=“”；
文件.正文.附件（bckMovie）；
document.getElementById（movie.style.display=“block”；
document.getElementById（movie.play（）；
}
movieNow=电影；
}
...
你有一些逻辑问题。。。请在JSFIDLE上检查这段代码，它似乎可以根据需要工作


var movieNow=“”；
功能播放视频（mp4）{
var movieNow=document.getElementById（“电影”）；
if（movieNow！==null）{
暂停（）；
movieNow.style.display=“无”；
document.getElementById（'mysource'）.src=“videos/”+mp4+”.mp4”；
movieNow.play（）；
movieNow.style.display=“block”；
}否则{
bckMovie=document.createElement（“视频”）；
bckMovie.id=“电影”；
bckMovie.className=“myvideo”；
bckMovie.innerHTML=“”；
文件.正文.附件（bckMovie）；
document.getElementById（“movie”）.style.display=“block”；
document.getElementById（“movie”）.play（）；
}
}
movieNow=电影；
...
谢谢你的回答，塔纳丁，但我总是有同样的问题。第一次单击可以很好地显示视频，但其他单击无法显示。更改视频源似乎没有受到影响。您好，请检查或 
<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>