HMTL5视频弹出窗口

Question

我在网站客户端上工作，要求有人观看视频时它应该自动播放（我做到了），当有人单击视频时它应该在弹出窗口中打开（我做到了并且工作正常）。 现在他问我，何时单击视频1和弹出窗口中的视频应该与第一部视频已经运行的时间（如00:35秒）同时开始。 `

this is for video 

  jQuery(document).ready(function(){ jQuery("#video1").click(function(){ jQuery("#video1 source").clone().prependTo('#video2'); }); jQuery("#video1").click(function(){ jQuery("#video1 source:first-child").remove(); }); jQuery("#video2").on("play",function(){ jQuery("#video1").trigger("pause"); }); }); jQuery(document).ready(function(){ jQuery('#video1').click(function(){ jQuery('#vid_overlay').fadeIn('slow'); }); jQuery('#vid_overlay').hide(); jQuery('#video1').click(function(){ jQuery('#vid_overlay').fadeIn('slow'); }); jQuery('#exit_btn').click(function(){ jQuery('#vid_overlay').fadeOut('slow'); }); jQuery('#video1').click(function(){ this.paused?this.play():this.pause(); }); jQuery('#video1').click(function(){ jQuery("#video2").trigger("play"); }); jQuery('#exit_btn').click(function(){ jQuery("#video2").trigger("pause"); }); jQuery('#exit_btn').click(function(){ jQuery("#video1").trigger("play"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <video id="video1" width="300" controls autoplay loop> <source id="video_src" src="videos/BIISummitDubai.mp4" type="video/mp4"> </video> and this for is popup <div id="vid_overlay"> <div id="video_wrap"> <span id="exit_btn">&times;</span> <video id="video2" width="800" controls loop> </video> </div> </div> 

Answer 1

currentTime属性设置或返回音频/视频播放的当前位置（以秒为单位）。

设置此属性时，播放将跳至指定位置。

因此，您可以获取video1的currentTime，然后将其设置为video2

像这样：

video2.currentTime = video1.currentTime;

Answer 2

您可以尝试使用css only弹出窗口，以便它将以相同的持续时间在弹出窗口中播放同一视频。

    <div id="popup1" class="overlay">
    <div class="popup">
        <a class="close" href="#">&times;</a>
  <a href="#popup1">  <video id="video1" width="300" controls autoplay loop>
        <source id="video_src" src="videos/BIISummitDubai.mp4" type="video/mp4">
    </video></a>
        </div>
</div>

和CSS

    .overlay:target {
  visibility: visible;
  opacity: 1;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
}

.overlay:target .popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 300px;
  position: relative;
}


.popup .close {
  position: absolute;
  top: 0px;
  right: 0px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  display:none;
}
.overlay:target .popup .close{display:inline-block;}
.popup .close:hover {
  color: #06D85F;
}

试试这个小提琴https://jsfiddle.net/5qce80fs/12/