Creating a video playlist with separate audio tracks on the fly, is this possible today?

Question

I've been researching all over the web but haven't found any conclusive answer to this so thought I'd ask the stackoverflow community.

I have an HTML(5) page which is supposed to get the following functionality:

• Video "timeline" (no editing, but user can add one video after another and reorder the videos within this timeline)
• Separate audio tracks (music/effects, not synced speech) can be added to this space and should play alongside the arrangement of videos.

The entire 'timeline' of videos can be considered as one long clip, and the audio should play alongside the entire length of the timeline, not per track.

A 3 min timeline consisting of 3x 1min clips would need a matching 3min audio clip or if the audio clip is shorter it should start looping after it finishes.

From my research I gather than any of this stuff using HTML5/JS would require either support for @mediagroup or audioTracks (though the latter doesn't really address the issues around multiple videos that are playing as one timeline).

The project's browser requirements are: IE9 and up, Chrome, Firefox, iPad.

Is this stuff even possible today?

If it is, any ideas on how to implement this would be much appreciated.

Answer 1

This is all possible using Popcorn.js with a handful of new plugins and modules.

To get started, you need:

• The latest version of Popcorn.js (1.4, not released yet but on the master branch)
• popcorn._MediaElementProto.js
• Popcorn "Null" wrapper
• Popcorn Inception plugin

Include the above script files in that order, and create a container element in which to put everything. Then, something like this:

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'
});

You can programmatically add or remove any or all of those clips, including additional copies of the audio file if you need it to loop. The HTMLNullVideoElement mimics a native video element, so you can use the methods and properties on that object to create a player interface.

The only issue here is that none of this is going to work on an iPad. Unfortunately, Mobile Safari will not play more than media element in a web page. There are some tricks you can do to swap them out as the play, but it's probably not going to play seamlessly and the audio track won't work.