HMTL5视频弹出窗口

Question

i working on website client demanding when someone comes on video it should autoplay (i did it), when someone click on the video it should open in popup (i did it and working fine). Now he asked me when some click on the video1 and the video in popup should start from the same time as the first video already run like 00:35 sec. `

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

The currentTime property sets or returns the current position (in seconds) of the audio/video playback.

When setting this property, the playback will jump to the specified position.

So, you can get the currentTime of the video1 and then set it to video2

Something like this:

video2.currentTime = video1.currentTime;

Answer 2

you can try css only popup so it will play same video in popup with same duration.

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

and 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;
}

try this fiddle https://jsfiddle.net/5qce80fs/12/