Question

我们如何将视频叠加在另一个视频上，以便它们可以同步运行。

我尝试过使用javascript，但两者都没有同时播放。

Answer 1

<!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代码来控制它。

Answer 2

如果没有实现一些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
 }
}

在视频上播放视频

2 个答案: