An HTML5 video player that can take in multiple videos with time offsets, and play them in a sequence.
For playing multiple videos in a sequence, it is possible to use a single <video> element and change its src to other videos. But there is a time lag from the point it starts to load, to the point it actually becomes playable.
This javascript library preloads videos, coordinates the multiple <video> elements that are created, and enables cross-disolve transitions during playback.
Have these Javascript and CSS files included in your <head> section. For now, I recommend using the Github CDN to get the files, since there might be frequent changes and bugfixes to the codebase.
<!-- Dependancies -->
<script src="https://rawgithub.com/cbf02000/um-video-player-js/master/js/jquery-2.1.0.min.js"></script>
<script src="https://rawgithub.com/cbf02000/um-video-player-js/master/js/video.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/cbf02000/um-video-player-js/master/css/video-js.css" />
<!-- Actual um-video-player.js -->
<script src="https://rawgithub.com/cbf02000/um-video-player-js/master/js/um-video-player.js"></script>Prepare the render object data structure. (For now, it is suppose to use the UM backend, all IDs are UMIDs, and automatically uses UMQuery to back reference the actual URL of video.)
var renderObjects = {
rID: 1,
rtitle: 'Ultimate Media Remix',
contentURLs: [{
url: "http://url/to/video1.mp4"
startTime: 2.0,
endTime: 5.0,
}, {
url: "http://url/to/video2.mp4",
startTime: 2.0,
endTime: 10.0,
},
/* Could contain as many content objects */
],
};Prepare the placeholder <div> somewhere in your HTML document and be sure to define its height and width in css. (id could be arbitrary)
<div id="um_video_player_wrapper"></div>#um_video_player_wrapper {
width: 640px;
height: 360px;
}Use the syntax below to initialize the player object.
var player;
player = new UMVideoPlayer("#um_video_player_wrapper", onReady, onLoadError, onTimeUpdate, onFinish);
player.setRenderObject(renderObjects);
function onReady() {
console.log("READY");
}
function onLoadError(e) {
console.log("ERROR", e);
}
function onTimeUpdate() {
console.log("ON TIME UPDATE", "Current Time is:", this.currentTime());
}
function onFinish() {
console.log("ON FINISH");
}"#id"is theidof the placeholder<div>element.onReadyis the callback function for when the video is ready for play.onLoadErroris the callback function for when their is an error.onTimeUpdateis the callback function for when the video progresses.onFinishis the callback function for when the video is done.
- Give the instance and render object
obj.
- Play render object. Always call after
onReadyis invoked.
- Pause render object
- Get the current time of the render object.
This relies on the following libraries to function properly.
- video.js (http://www.videojs.com/) - This repo includes version 4.4.1
- jQuery (http://jquery.com/) - This repo includes version 2.1.0
In order to reduce unexpected malfunctions, please use included library files.