javascript - 如何确保 2 个 完全同时播放(没有滞后)？

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()调用该方法时将自动单击它绑定(bind)到的任何内容。

演示

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://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4' width='240'></video>
<video src='https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.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>