A Popcorn.js plugin that lets you embed an entire Popcorn composition inside another one, for as many levels deep as your computer can handle.
- Embed any media playable by Popcorn
- Load Popcorn events on spawned media
- Supports HTML5 video and audio, Vimeo and Soundcloud, with a Popcorn "wrapper"
- Synchronize main media with spawned media (optional)
- Specify in- and out-points to play partial section of spawned media
- Automatically detects browser support for multiple videos, with popcorn.compatible
- Allow main media to pause while spawned media plays
- Support YouTube and other hosted formats
- Popcorn Base - Must be loaded before popcorn.inception.js. The file is included in this repo.
- Certain browsers (e.g. Mobile Safari on iPad) will not play more than one media file (audio or video) at a time.
- popcorn-compatible is not strictly required but is highly recommended to detect browser support and replace the plugin with a fallback when support is not available. Must be loaded before popcorn.inception.js. (Included)
To play Vimeo or Soundcloud media (YouTube and jPlayer coming soon), load the appropriate Popcorn wrapper.
Even without the full interactive video features of a Popcorn composition, Popcorn Inception can be used simply to spawn a video or audio clip.
popcorn.inception({
//start and end times, just like any Popcorn event
start: 5,
end: 25,
/*
id of the element in which to put the new video/audio element
or the element itself. Required.
*/
target: 'container',
//a single string URL
//url: 'videos/myvideo.webm'
//...or an array of multiple sources:
url: [
'videos/myvideo.mp4',
'videos/myvideo.webm'
]
/*
inception will also an accept multiple sources as a new-line delimited string or a JSON string representing an array
*/
});
By default, the spawned media will play in sync with the main media. To have them play independently, set the sync parameter to false.
Media elements are rendered without built-in controls, but they may be enabled by setting controls: true.
When a child media clip is loaded into your main composition, by default, the entire clip is played, up to the end of your event. But you can specify a section of the media, if you don't want to include the whole thing.
popcorn.inception({
start: 0, //play this video right at the beginning of the main video
end: 15,
url: 'http://vimeo.com/50531435', //play a Vimeo video
//play this video for 15 seconds, starting 20 seconds in
from: 20,
to: 35
});
It is usually a good idea to have the length of the clip match the length of the Popcorn event. If the clip is longer, it will just be cut off sooner. If the clip is shorter than the event, it will freeze on the last frame until the event is over and then disappear.
To load up Popcorn events on other plugins that synchronize with the spawned media, pass them as an array on the events parameter. Each event is an object like what is normally passed to Popcorn, but with the additional _type parameter to specify which plugin to use.
popcorn.inception({
start: 0,
end: 10,
url: 'videos/myvideo.webm',
id: 'subclip'
events: [
{
_type: 'subtitle',
start: 2,
end: 6,
text: 'Hello world!'
}
]
});
In the above example, the optional id parameter is added, which sets the id on the <div> containing the video. The subtitle event inside has the target parameter set by default to that container element, so it is possible to leave it out, even though most Popcorn plugins require it. However, it is possible to override the default and set the target to whatever you want.
Since Popcorn Inception works like any other plugin, it is possible to embed compositions within compositions, as many levels deep as your computer can handle.
popcorn.inception({
start: 0,
end: 10,
url: 'videos/one.webm',
events: [
{
_type: 'inception',
start: 2,
end: 8,
url: 'videos/two.webm',
events: [
{
_type: 'inception',
start: 0,
end: 6,
url: 'videos/three.webm',
events: [
{
_type: 'subtitle',
start: 1,
end: 5,
text: 'Hello world!'
}
]
}
]
}
]
});
Popcorn Inception is built with Popcorn Base, so any CSS styles can be set on the element containing the media as options on the event, and most of these can be animated with optional keyframes. See detailed instructions.
popcorn.inception({
start: 0,
end: 10,
url: 'videos/myvideo.webm',
// animate video position from left to right and back again
left: {
0: '10%',
0.5: '50%',
1: '100%'
},
top: '10%',
//fade out at the end
opacity: {
0.9: 1,
1: 0
}
});
You can set the onStart, onEnd, onFrame and onTeardown parameters as callback functions, which will be passed the options object, in case you want to perform additional operations after the event is created.