文章/答案/技术大牛

发布

社区首页 >问答首页 >通过视频播放视频

问通过视频播放视频
EN

Stack Overflow用户

提问于 2014-03-11 20:56:10

回答 2查看 118关注 0票数 0

我们如何将一个视频覆盖到另一个视频上，以便它们可以同步运行。

我试过使用javascript，但两者都不能同时播放。

video

overlay

回答 2

Stack Overflow用户

发布于 2015-02-03 16:05:44

<!doctype html>
<html>
<head>
   <title>HTML5 Video Effects</title>
</head>
<body>
      <video id="video-source" controls autoplay preload  width="500"  style="position: absolute; left:0;">
         <source src="video1.mp4" type="video/mp4"> 
      </video>   
   <video id="video-source2" controls  autoplay preload width="500"  style="position: absolute; opacity:0.5; left:0;">
         <source src="video2.mp4" type="video/mp4"> 
      </video>     
</body>
</html>

您不能控制video1，因为video2捕捉到鼠标经过事件，所以您需要编写一些js代码来控制它。

票数 0

Stack Overflow用户

发布于 2015-12-18 20:42:47

如果不实现一些javascript代码，您将找不到合适的解决方案。一个简单的解决方案是几乎同时启动这两个视频。在两个视频中设置自动启动属性是可能的，但一旦视频需要更多的时间加载，它就会失败。

var vid1 = document.getElementById("myVideo1");
var vid2 = document.getElementById("myVideo2");
vid1.play();
vid2.play();

如果您认为同步是必要的，那么您必须决定哪个视频决定回放。因此，它是一个主从依赖关系。然后监听主机的timeupdate事件，并纠正从机的播放位置：

vid1.ontimeupdate = function() { sync() }; // listen to the master video

function sync() {
  vid2.currentTime = vid1.currentTime; // correct the slave video
}

如果两个视频都包含音轨，则可以中断生成的声音。因此，您可以在某个间隔内同步两个视频，例如每隔5秒：

var intervalID = window.setInterval( sync, 5000); // 5 seconds

function sync() {
  vid2.currentTime = vid1.currentTime; // correct the slave video
}

为了避免进一步中断，您可以查看两个视频的播放位置是否相差太大。在下面的示例中，只有在播放差异超过半秒的情况下，才会同步视频。

function sync() {
 if( Math.abs( vid2.currentTime - vid1.currentTime ) > 0.500 ){
  vid2.currentTime = vid1.currentTime; // correct the slave video
 }
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22326391

复制

相似问题

问通过视频播放视频
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过视频播放视频EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过视频播放视频
EN