web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-10 23:30:03 +02:00
Code Releases Activity

Added a loading bar.

Browse Source
This commit is contained in:
Steve Heffernan 2010-06-09 01:24:12 -07:00
parent 12c3f34723
commit 097cdaa14c
3 changed files with 49 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
demo.html
View File

@ -14,24 +14,24 @@
// $(function(){
// VideoJS.setup();
// })
// If using Prototype
// document.observe("dom:loaded", function() {
// VideoJS.setup();
// });
// If not using a JS library
window.onload = function(){
VideoJS.setup();
}
</script>
<!-- Include the VideoJS Stylesheet -->
<link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
</head>
<body>
<!-- Begin VideoJS -->
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
@ -44,7 +44,7 @@
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip":"http://video-js.zencoder.com/oceans-clip.mp4"}' />
<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
title="No video playback capabilities." />
</object>
</video>
@ -56,6 +56,6 @@
</p>
</div>
<!-- End VideoJS -->
</body>
</html>

6
video-js.css
View File

@ -43,7 +43,11 @@ img.vjs-poster { display: block; position: absolute; left: 0px; top: 0px; width:
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#777));
background: -moz-linear-gradient(top, #fff, #777);
}
.vjs-progress-control .vjs-load-progress { position: absolute; display: block; width: 0px; height: 9px; background-color: #777; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.vjs-progress-control .vjs-load-progress { position: absolute; display: block; width: 0px; height: 9px; background-color: #777; opacity: 0.5;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#ccc));
background: -moz-linear-gradient(top, #999, #ccc);
}
.vjs-progress-control .vjs-progress-time { list-style: none; float: left; margin: 7px 0 0 5px; padding: 0; font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
/* Volume */

40
video.js
View File

@ -34,10 +34,15 @@ var VideoJS = Class.extend({
// Hide no-video download paragraph
this.box.getElementsByClassName("vjs-no-video")[0].style.display = "none";
this.buildPoster();
this.showPoster();
this.propertyInterval
this.video.preload = true;
this.video.autobuffer = true;
// Hide default controls
this.video.controls = false;
@ -57,6 +62,10 @@ var VideoJS = Class.extend({
this.video.addEventListener('volumechange',this.onVolumeChange.context(this),false);
// Listen for video errors
this.video.addEventListener('error',this.onError.context(this),false);
// Listen for Video Load Progress (currently does not if html file is local)
this.video.addEventListener('progress', this.onProgress.context(this), false);
// Sometimes the 'progress' event doesn't fire the final (finished) progress notice.
this.watchBuffer = setInterval(this.updateBufferedTotal.context(this), 500);
// Listen for clicks on the play/pause button
this.playControl.addEventListener("click", this.onPlayControlClick.context(this), false);
@ -95,6 +104,9 @@ var VideoJS = Class.extend({
// Have to add the mouseout to the controller too or it may not hide.
// For some reason the same isn't needed for mouseover
this.controls.addEventListener("mouseout", this.onVideoMouseOut.context(this), false);
// Support older browsers that used autobuffer
if (this.video.preload) this.video.autobuffer = true;
},
buildController: function(){
@ -284,6 +296,14 @@ var VideoJS = Class.extend({
this.updateVolumeDisplay();
},
// When the video's load progress is updated
// Safari 5 seems have lost this functionality
onProgress: function(event){
if(event.total > 0) {
this.updateLoadProgress(event.loaded / event.total);
}
},
onError: function(event){
console.log(event);
console.log(this.video.error);
@ -293,6 +313,17 @@ var VideoJS = Class.extend({
this.showController();
},
updateBufferedTotal: function(){
if (this.video.buffered && this.video.buffered.length >= 1) {
if (this.video.buffered.end(0) == this.video.duration) {
this.updateLoadProgress(1);
clearInterval(this.watchBuffer);
}
} else {
clearInterval(this.watchBuffer);
}
},
// React to clicks on the play/pause button
onPlayControlClick: function(event){
if (this.video.paused) {
@ -404,13 +435,18 @@ var VideoJS = Class.extend({
this.updateTimeDisplay();
},
updateLoadProgress: function(decimal){
if (this.controls.style.display == 'none') return;
this.loadProgress.style.width = (decimal * (this.progressHolder.offsetWidth - 2)) + "px";
},
// Update the play position based on where the user clicked on the progresss bar
setPlayProgress: function(newProgress){
this.video.currentTime = newProgress * this.video.duration;
this.playProgress.style.width = newProgress * (this.progressHolder.offsetWidth - 2) + "px";
this.updateTimeDisplay();
},
setPlayProgressWithEvent: function(event){
var newProgress = this.getRelativePosition(event.pageX, this.progressHolder);
this.setPlayProgress(newProgress);