Play two videos at the same time in HTML

Question

I'm trying to play two videos side by side in HTML, at the same time, preferrably by one control, as if they are a single video (one is a filtered version of the other, that's why).

How can I achieve that?

Here is the simple code I have so far that plays them separately, but side by side:

IT goldman · Answer

You can stream from one media element to another. It should be pretty instantaneous. But then again, it would be the same source.

/*
 *  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;
}

Play two videos at the same time in HTML

1 Answers