javascript - 在 HTML 中同时播放两个视频

Question

我试图在 HTML 中同时播放两个视频，最好通过一个控件，就好像它们是一个视频(一个是另一个的过滤版本) ，这就是原因)。

我怎样才能实现这一目标？

这是我迄今为止所拥有的简单代码，可以单独但并排播放它们:

<center>
<video height="350" controls>
  <source src="video1.mp4" type="video/mp4">
</video>
<video height="350" controls>
  <source src="video2.mp4" type="video/mp4">
</video>
</center>

Answer 1

您可以从一个媒体元素流式传输到另一个媒体元素。它应该是非常瞬时的。但话又说回来，这将是同一个来源。

/*
 *  Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
 *
 *  Use of this source code is governed by a BSD-style license
 *  that can be found in the LICENSE file in the root of the source
 *  tree.
 */
'use strict';

const leftVideo = document.getElementById('leftVideo');
const rightVideo = document.getElementById('rightVideo');

leftVideo.addEventListener('play', () => {
  let stream;
  const fps = 0;
  if (leftVideo.captureStream) {
    stream = leftVideo.captureStream(fps);
  } else if (leftVideo.mozCaptureStream) {
    stream = leftVideo.mozCaptureStream(fps);
  } else {
    console.error('Stream capture is not supported');
    stream = null;
  }
  rightVideo.srcObject = stream;
  rightVideo.play()
});

video {
  width: 200px;
  float: left;
}

<video id="leftVideo" height="350" controls crossorigin="anonymous">
  <source  src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"></source>
</video>
<video id="rightVideo" height="350" controls crossorigin="anonymous">

</video>