javascript - 即时创建具有单独音轨的视频播放列表，今天这可能吗？

Question

我一直在整个网络上进行研究，但还没有找到任何确凿的答案，所以我想问问 stackoverflow 社区。

我有一个 HTML(5) 页面，它应该具有以下功能:

视频“时间轴”(无需编辑，但用户可以一个接一个地添加视频并在此时间轴内重新排序视频)

可以将单独的音轨(音乐/效果，非同步语音)添加到此空间，并应与视频的排列一起播放。

视频的整个“时间线”可被视为一个长剪辑，音频应与时间线的整个长度一起播放，而不是按轨道播放。

由 3 个 1 分钟剪辑组成的 3 分钟时间线需要匹配的 3 分钟音频剪辑，或者如果音频剪辑较短，则应在完成后开始循环。

根据我的研究，我收集到的任何使用 HTML5/JS 的东西都需要支持 @mediagroup。或 audioTracks (尽管后者并没有真正解决作为一个时间线播放的多个视频的问题)。

该项目的浏览器要求是:IE9 及以上、Chrome、Firefox、iPad。

这东西今天甚至可能吗？

如果是的话，任何关于如何实现这一点的想法都将不胜感激。

Answer 1

使用带有少量新插件和模块的 Popcorn.js，这一切都是可能的。

要开始，您需要:

Popcorn.js 最新版本(1.4，尚未发布，但在master分支上)

popcorn._MediaElementProto.js

爆米花“Null”包装

Popcorn Inception插件

按顺序包含上述脚本文件，并创建一个容器元素来放置所有内容。然后，像这样:

var player = Popcorn.HTMLNullVideoElement('#container');
player.src = '#t=0,180'; // Makes a fake video 180 seconds long. Nothing but a timer.

var popcorn = Popcorn(player);

// first clip
popcorn.inception({
    start: 0,
    end: 60,
    source: ['video1.mp4', 'video1.webm', video1.ogv'],
    top: 0,
    left: 0,
    width: '100%'
    target: '#container',
    volume: 0 // mute this video, if you want
});

// second clip
popcorn.inception({
    start: 60,
    end: 120,
    source: ['video2.mp4', 'video2.webm', video2.ogv'],
    top: 0,
    left: 0,
    width: '100%'
    target: '#container',
    volume: 0
});

// third clip
popcorn.inception({
    start: 120,
    end: 180,
    source: ['video3.mp4', 'video3.webm', video3.ogv'],
    top: 0,
    left: 0,
    width: '100%'
    target: '#container',
    volume: 0
});

// audio file
popcorn.inception({
    start: 0,
    end: 180,
    source: ['audio.mp3', 'audio.ogg'],
    visibility: 'hidden'
});

您可以以编程方式添加或删除任何或所有这些剪辑，包括音频文件的其他副本(如果需要循环播放)。 HTMLNullVideoElement 模仿原生视频元素，因此您可以使用该对象上的方法和属性来创建播放器界面。

这里唯一的问题是这些都不能在 iPad 上运行。不幸的是，Mobile Safari 只播放网页中的媒体元素。您可以采取一些技巧将它们作为播放交换出来，但它可能不会无缝播放并且音轨将无法正常工作。