Question

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

我有一个HTML（5）页面，它应该具有以下功能：

视频“时间轴”（无需修改，但用户可以在此时间轴内添加一个视频并重新排序）
可以在此空间添加单独的音轨（音乐/特效，不同步语音），并与视频的排列一起播放。

视频的整个“时间轴”可视为一个长剪辑，音频应与时间轴的整个长度一起播放，而不是按照曲目播放。

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

从我的研究中我收集到的比使用HTML5 / JS的任何内容都需要支持@mediagroup或audioTracks（尽管后者并没有真正解决围绕正在播放的多个视频的问题作为一个时间表）。

该项目的浏览器要求是：IE9及更高版本，Chrome，Firefox，iPad。

这些东西今天有可能吗？

如果是的话，任何关于如何实现这一点的想法都将受到高度赞赏。

Answer 1

使用Popcorn.js可以使用少量新的插件和模块。

要开始使用，您需要：

Popcorn.js的最新版本（1.4，尚未发布，但在主分支上）
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在网页中的播放次数不会超过媒体元素。你可以用一些技巧将它们作为游戏进行交换，但它可能无法无缝播放，音频轨道也不起作用。

如今可以创建具有单独音频轨道的视频播放列表吗？

1 个答案: