Question

我在网站客户端工作时要求有人来看视频它应该自动播放（我做了），当有人点击它应该在弹出窗口打开的视频（我做了它并且工作正常）。现在他问我什么时候点击视频1，弹出视频应该从第一个视频已经运行的同一时间开始，如00:35秒。 `

this is for video

＆＃13;

	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");
			});
		});

＆＃13;

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

＆＃13;

Answer 1

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

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

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

这样的事情：

video2.currentTime = video1.currentTime;

Answer 2

你可以尝试css只弹出，这样它会以相同的持续时间弹出相同的视频。

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

HMTL5视频弹出

2 个答案: