JavaScript - 如何一次播放多个视频?

时间:2017-09-16 14:01:19

标签: javascript video html5-video

我有一个<?php $_POST = [ 'name' => 'Steve McQueen', 'csrf' => 'y53zmSV0LhhjcjEg', 'option1' => '1', 'option2' => '3', 'option3' => '2', 'option4' => '1' ]; $expected = [ "option1", "option2", "option3", "option4" ]; $result = []; foreach ($expected as $key) { $result[$key] = isset($_POST[$key]) ? $_POST[$key] : null; } $check = array_unique($result); if (count($check) !== count($expected)) { echo 'Please only select unique choices from the options'; } else { echo 'All good!'; } 个视频元素,我希望同时播放。

我在网上找到的唯一方法是使用array,但这似乎并不广泛/如果完全支持的话。

我期待的是:

new MediaController();

我发现这样做的唯一方法是在阵列上进行var videos = document.querySelectorAll('video'); var mc = new MediaController(); video.forEach(function(el) { el.controller = mc; }); mc.play(); 并一个接一个地播放它们,但我想知道是否有人知道是否有办法可以做到这一点,但是你播放时注意forEachvideo[0]之间的轻微延迟。

甚至可以用JavaScript使这个看起来无用吗?

P.S。这只需要是一个Webkit解决方案,因为这不是浏览器的真正原因,而是UE4游戏的前端更多。

1 个答案:

答案 0 :(得分:4)

我的假设是他们不会立即玩,因为他们是异步加载的。我建议等待所有视频的准备状态,然后逐个播放。以下是如何使用Promise实现此目的的示例。

&#13;
&#13;
public int clipboardcalledcnt { get; set; } // CopyingRowClipboardContent invoked count
private void myDataGrid_CopyingRowClipboardContent(object sender, DataGridRowClipboardEventArgs e)
{
    PathInfo cellpath = new PathInfo(); // A custom class to hold path information
    string path = string.Empty;

    DataGrid dgdataPaths = (DataGrid)sender;
    int rowcnt = dgdataPaths.SelectedItems.Count;

    cellpath = (PathInfo)e.Item;

    path = "Row #" + clipboardcalledcnt + " Len=" + cellpath.Length.ToString() + ", path=" + cellpath.Path;

    e.ClipboardRowContent.Clear();

    if (clipboardcalledcnt == 0) // Add header to clipboard paste
        e.ClipboardRowContent.Add(new DataGridClipboardCellContent("", null, "--- Clipboard Paste ---\t\t\n")); // \t cell divider, repeat (number of cells - 1)

    clipboardcalledcnt++;
    e.ClipboardRowContent.Add(new DataGridClipboardCellContent(path, null, path));

    if (clipboardcalledcnt == rowcnt)
        clipboardcalledcnt = 0;
}
&#13;
// Get all videos.
var videos = document.querySelectorAll('video');

// Create a promise to wait all videos to be loaded at the same time.
// When all of the videos are ready, call resolve().
var promise = new Promise(function(resolve) {
  var loaded = 0;

  videos.forEach(function(v) {
    v.addEventListener('loadedmetadata', function() {
      loaded++;

      if (loaded === videos.length) {
        resolve();
      }
    });
  });
});

// Play all videos one by one only when all videos are ready to be played.
promise.then(function() {
  videos.forEach(function(v) {
    v.play();
  });
});
&#13;
&#13;
&#13;