如何确保 2 个<video>同时播放（没有延迟）？

Question

这是我当前的代码：https://jsfiddle.net/n7u4twb1/10/

当前js代码：

Data={
  num_files:2
}

Video = {
  preview: {
    play_all: function(){
      for(i=0;i<Data.num_files;i++){
         $('#video'+i).get(0).play();
      }
    }
  }
}

使用“全部播放”按钮时，我一半以上的时间都会遇到延迟。如何保证视频同时播放不卡顿？它是在视频拼贴（多个视频）被处理并变成一个视频之前对其进行预览 - 我希望用户能够编辑每个视频开始的时间，但他们需要一种在处理开始之前预览拼贴的方法！预先感谢

Answer 1

如果每个视频都有一个按钮，请添加一个使用

.click()

方法的额外按钮。

.click()

方法类似于 jQuery

.trigger()

方法，调用时会自动单击它绑定的任何内容。

演示

var ui = document.forms.ui;
var btns = ui.elements;

btns[0].onclick = function(e) {
  play(0);
}

btns[1].onclick = function(e) {
  play(1);
}

btns.vSync.onclick = function(e) {
  btns[0].click();
  btns[1].click();
}

function play(idx) {
  var vids = Array.from(document.querySelectorAll('video'));
  var vid = vids[idx];
  if (vid.paused || vid.ended) {
    vid.play();
  } else {
    vid.pause();
  }
}

<video src='https://glsec.s3.amazonaws.com/mp4/60s.mp4' width='240'></video>
<video src='https://glsec.s3.amazonaws.com/mp4/60s.mp4' width='240'></video>

<form id='ui'>
  <button data-id='0' type='button'>VIDEO A</button>
  <button data-id='1' type='button'>VIDEO B</button>
  <button id='vSync' type='button'>SYNC</button>
</form>