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/