时间戳

首页 > 解决方案 > 不允许 2 个视频同时播放

javascript - 不允许 2 个视频同时播放

问题描述

我以 .webm 格式发布两个视频。两者不能同时播放，也就是说，一旦您开始播放一个视频，就不能开始另一个视频 - 除非第一个视频被暂停。我该如何解决？

        <div class="video_box">
            <h2 class="center_horisontal">Katy Perry 1</h2>
                <div id="video_overlays">
                    <div id="outer" onclick="playPause()"><div id="inner">&nbsp;</div></div>
                </div>
                <video width="500" id="video1" controls>    
                <source src="Katy-Perry-swish.webm" type="video/webm">
            </video> 
            <!--Script til html-knapper til video-->
            <script> 
                var myVideo=document.getElementById("video1"); 
                //lytter efter "pause" og "play" og viser eller skjulder #video_overlays
                video1.addEventListener('play', videoPausePlayHandler, false);
                video1.addEventListener('pause', videoPausePlayHandler, false);
                function videoPausePlayHandler(e) {
                if (e.type == 'play') {$('#video_overlays').hide(); $('#icon-pause').show();  $('#icon-play').hide();$('#video-start-text').hide();
                    } 
                else if (e.type == 'pause') {
                    $('#video_overlays').show(); $('#icon-pause').hide(); $('#icon-play').show();
                    //hvis filmen har stået på pause i 20 minutter relaodes siden
                    setTimeout(function(){
                        location.reload(); 
                      },1200000);
                    }
                }
                // play/pause-knap funktion
                function playPause()
                    { 
                    if (myVideo.paused) 
                      myVideo.play(); 

                    else 
                      myVideo.pause(); 
                    } 
                //til starten af filmen og pause
                function rewind_and_pause()
                    { 
                    myVideo.currentTime=0;
                    myVideo.pause(); 
                    } 

            </script> 
        </div>
        <div class="video_box-2">
            <h2 class="center_horisontal">Katy Perry 2</h2>
                <div id="video_overlays2">
                    <div id="outer" onclick="playPause2()"><div id="inner">&nbsp;</div></div>
                </div>
                <video width="500" id="video2" controls>    
                <source src="Katy-Perry-bon.webm" type="video/webm">
            </video> 
            <!--Script til html-knapper til video-->
            <script> 
                var myVideo2=document.getElementById("video2"); 
                //lytter efter "pause" og "play" og viser eller skjulder #video_overlays
                video2.addEventListener('play', videoPausePlayHandler, false);
                video2.addEventListener('pause', videoPausePlayHandler, false);
                function videoPausePlayHandler(e) {
                if (e.type == 'play') {$('#video_overlays2').hide(); $('#icon-pause2').show();  $('#icon-play2').hide();$('#video-start-text').hide();
                    } 
                else if (e.type == 'pause') {
                    $('#video_overlays2').show(); $('#icon-pause2').hide(); $('#icon-play2').show();
                    //hvis filmen har stået på pause i 20 minutter relaodes siden
                    setTimeout(function(){
                        location.reload(); 
                      },1200000);
                    }
                }
                // play/pause-knap funktion
                function playPause2()
                    { 
                    if (myVideo2.paused) 
                      myVideo2.play(); 

                    else 
                      myVideo2.pause(); 
                    } 
                //til starten af filmen og pause
                function rewind_and_pause2()
                    { 
                    myVideo2.currentTime=0;
                    myVideo2.pause(); 
                    } 

            </script> 
        </div>

这是一个示例页面，其中包含一些看似不必要的额外代码，将在最终版本中使用（与 Katy Perry 无关）

http://www.tilnorsk.com/katy/katy-perry.html

谢谢你的帮助 ：-）

标签： javascriptfunction

解决方案

你不能有两个同名的函数，第二个函数会重写第一个声明videoPausePlayHandler。

话虽如此，您可以简单地添加一个将在视频之间切换的全局变量。

var currentVideo = true;
function videoPausePlayHandler(e) {
  /* pause all videos */
  if (videoSwitch) {
    /* play video one */
  } else {
    /* play video two */ 
  }
  videoSwitch = !videoSwitch;
};

更好的是，您可以使用 add class 到目标元素，这样您可以更轻松地处理同一页面上的两个以上视频，还可以添加一些样式。去野外！

推荐阅读