0

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.

Jannis
  • 17,025
  • 18
  • 62
  • 75
  • is this only for playback purpose, or you want to render the 'finised product' (video made of audio and video track)? – Louis Loudog Trottier Nov 12 '12 at 04:33
  • The "composing" in the timeline would only be for playback initially. Once the user has confirmed their decision however, I would need to freeze the order of the selected and the chosen track and save this so it can be output on another page. But even on the next page I would only playback their selection, this time without the ability to change anything about the sequence or audio track. – Jannis Nov 12 '12 at 04:55
  • you cloud make an audio tag and put the audio in this tag, mute the video and make them play simultaniouly.? I don't recall how to make it happend but i did something sumilar with plain HTML5 and some JS. – Louis Loudog Trottier Nov 15 '12 at 21:35

1 Answers1

1

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

To get started, you need:

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.

brianchirls
  • 7,661
  • 1
  • 32
  • 32