An HTML5 video player that can take in multiple videos with time offsets, and play them in a sequence. Originally developed by Dan Sawada; expanded by Eric Dahlseng and Savannah Niles.
If you want to play multiple video clips in a sequence, you can use a single <video> element and change its src when one clip ends and you want to start the next one. Unfortunately, though, there is a time lag between when the <video> element begins to load and when it actually becomes playable.
The purpose of this module is to provide a playback method that eliminates this time lag. This module will preload multiple <video> elements, and coordinate their playback. Many of the properties, callbacks, and methods that a typical <video> element has are also available with this module. This means that common controls (like seeking for example) can easily be performed, so that the end user doesn't have to know that more than one <video> element is being used.
To see a demo of how the VideoPlayer can be used, clone the repository or download this entire folder, and set up a quick HTTP server. Python comes with a simple built-in HTTP server:
$ python -m SimpleHTTPServer
If you want to use this module in a project of your own, you simply need to include the VideoPlayer.js file. We recommend copying the file into your project folder and including it in the <head> section of your html file:
<script src="\VideoPlayer.js"></script>If you want to always use the most updated version, feel free to use the GitHub CDN. Keep in mind, however, that the API is subject to change in the future. Just include this in you html <head> section:
<script src="https://raw.githubusercontent.com/edahlseng/videoplayer/master/VideoPlayer.js"></script>To use the video player, create a VideoPlayer object:
var player = new VideoPlayer(videoContainerID, renderObject, options);Only the videoContainerID and the renderObject are required. The options parameter allows for customization of the player. The available options are described in detail in the API Reference section below.
The videoContainerID is the id of a <div> element in your html file. This <div> must be empty (any elements you put in it will be removed by the player) as its only purpose is to hold the multiple <video> elements in the same place. Be sure to define its height and width in css. The id can be arbitrary:
<div id="VideoPlayerContainer"></div>The renderObject is an object that describes the sources and time ranges of your sequence of clips. The only required part of the render object is the EDL array. This array contains a list of objects that must contain a url to a video, and optionally a startTime and endTime in seconds.
var renderObject = {
EDL: [{
url: "http://um-static.media.mit.edu/UU-h0G46k4j2Q/UU-h0G46k4j2Q_low.mp4",
startTime: 1.0,
endTime: 4.0,
}, {
url: "http://um-static.media.mit.edu/UU-KOsIAlLPHE/UU-KOsIAlLPHE_low.mp4",
startTime: 26.5,
endTime: 34.0,
}, {
url: "http://um-static.media.mit.edu/UU-0MrczERAe4/UU-0MrczERAe4_low.mp4",
startTime: 54.0,
endTime: 58.5,
}],
};The VideoPlayer can be easily customized by specifying options when you create it, and by calling certain predefined methods.
You may pass in an options object in order to customize the video player. The syntax of the options object looks like this:
var options = { "classString" : "VideoPlayer",
"transitionTime" : .1,
"loadingErrorHandler" : loadingErrorHandler,
"loadingStartedHandler" : loadingStartedHandler,
"loadingStoppedHandler" : loadingStoppedHandler,
"playHandler" : playHandler,
"pauseHandler" : pauseHandler,
"timeUpdateHandler" : timeUpdateHandler,
"clipTransitionHandler" : clipTransitionHandler
};The options object can contain parameters as well as functions to be used as event handler callbacks.
autoLoadDurationis a boolean that specifies whether the video player should automatically load the duration when it is first created. See VideoPlayer.loadDuration() below in the Methods section for more information. The default isfalse.autoReloadis a boolean that specifies whether the video player should reload the render object when it has reached the end. The default istrue.classStringis the string that will be added to theclassattribute of the<video>elements that the player automatically creates. This parameter allows you to apply css rules to those<video>elements.preloadAmountis the number of clips that should be loaded in advance. In order to elminiate the time lag between clips, the video player will preload clips. By default the player preloads 1 clip. If the clips that you use are very short, or your users have slower internet connections, you may specifiy a largerpreloadAmount. Keep in mind that this may cause a larger loading delay at the beginning, however.transitionTimeis the length in seconds of the cross-fade between clips. The default is 0.
clipStartHandleris called when a new clip begins playing.durationLoadedHandleris called after the duration has first been loaded.finishedHandleris called when the end of the render object has been reached.loadingErrorHandleris called when there is a loading error.loadingStartedHandleris called when the player begins to wait for a loading clip.loadingStoppedHandleris called when the player is done waiting for a loading clip.playHandleris called when the player plays.pauseHandleris called when the player is paused.timeUpdateHandleris called when the current time of the player updates.videoReadyHandleris called when the video player is ready to play at the beginning.
- Returns the current time of the video, independent of the current time of the individual clips.
- Returns the index of the current clip.
- Returns the duration of all clips added together. This may need to be loaded first (see VideoPlayer.loadDuration() below).
- Calling this method will load the duration of the video.
- If some of the clips in the render object did not have a specified
endTime, then the only way to determine the length of those clips is to load the metadata for those clips and then get the clip duration. This only needs to be done once, but must be done before callingVideoPlayer.duration(), unless the render object contains anendTimefor each clip. - You can specify
"autoloadDuration" : truein the options object if you want the duration to be automatically loaded when the video player is first created.
- This will play the video player.
- This will pause the video player.
- This will seek the current time of the video player to the beginning of the specified
clipIndex.
- This will seek the current time of the video player to the time specified in
desiredSeconds. - The duration must be loaded before this method can be used.
- This will play the player if it is currently paused, and will pause the player if it is currently playing.
- This is very useful if you have a single button that acts as both the play button and the pause button.
Chrome has trouble loading the same video sequentially from an EDL. This works better in Safari.