mirror of
https://github.com/videojs/video.js.git
synced 2025-01-25 11:13:52 +02:00
Updated to latest version.
This commit is contained in:
Steve Heffernan
parent
015aff035a
commit
7c340e6263
@ -131,7 +131,7 @@
|
||||
|
||||
<p id="issues_link">Submit any bugs in the <a href="http://github.com/zencoder/video-js/issues">Issue Tracker</a> or update the <a href="http://wiki.github.com/zencoder/video-js/browser-device-compatibility">Compatibility Table</a></p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<!-- <div id="disqus_thread"></div>
|
||||
<script type="text/javascript">
|
||||
/**
|
||||
* var disqus_identifier; [Optional but recommended: Define a unique identifier (e.g. post id or slug) for this thread]
|
||||
@ -143,7 +143,7 @@
|
||||
})();
|
||||
</script>
|
||||
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript=videojs">comments powered by Disqus.</a></noscript>
|
||||
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
|
||||
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
video.js
|
||||
VideoJS
|
||||
--------
|
||||
[HTML5 Video Player](http://videojs.com)
|
||||
|
||||
View [VideoJS.com](http://videojs.com) for a demo and overview.
|
||||
|
||||
View demo.html for an example of how to use it.
|
||||
|
||||
Based on the tutorial at http://blog.steveheffernan.com/2010/04/how-to-build-an-html5-video-player/
|
||||
@ -14,48 +14,48 @@
|
||||
// $(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 -->
|
||||
<video id="video" class="video-js" width="640" height="264" poster="http://video-js.s3.amazonaws.com/oceans-clip.png" preload>
|
||||
<source src="http://video-js.s3.amazonaws.com/oceans-clip.mp4" type="video/mp4">
|
||||
<source src="http://video-js.s3.amazonaws.com/oceans-clip.webm" type="video/webm">
|
||||
<source src="http://video-js.s3.amazonaws.com/oceans-clip.ogg" type="video/ogg">
|
||||
<video class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" preload>
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4">
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm">
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.ogg" type="video/ogg">
|
||||
<object width="640" height="264" type="application/x-shockwave-flash"
|
||||
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
|
||||
<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.s3.amazonaws.com/oceans-clip.mp4"}' />
|
||||
<img src="http://video-js.s3.amazonaws.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
|
||||
<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"
|
||||
title="No video playback capabilities." />
|
||||
</object>
|
||||
</video>
|
||||
<p class="vjs-no-video"><strong>Download Video:</strong>
|
||||
<a href="http://video-js.s3.amazonaws.com/oceans-clip.mp4">MP4</a>,
|
||||
<a href="http://video-js.s3.amazonaws.com/oceans-clip.webm">WebM</a>,
|
||||
<a href="http://video-js.s3.amazonaws.com/oceans-clip.ogg">Ogg</a><br>
|
||||
<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
|
||||
<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
|
||||
<a href="http://video-js.zencoder.com/oceans-clip.ogg">Ogg</a><br>
|
||||
<a href="http://videojs.com">HTML5 Video Player</a> by <a href="http://videojs.com">VideoJS</a>
|
||||
</p>
|
||||
</div>
|
||||
<!-- End VideoJS -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,7 +1,7 @@
|
||||
.video-js-box { text-align: left; position: relative; z-index: 1000; }
|
||||
.video-js-box { text-align: left; position: relative; }
|
||||
video.video-js { background-color: #000; }
|
||||
|
||||
.video-js-box.vjs-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
|
||||
.video-js-box.vjs-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 1000; }
|
||||
.video-js-box.vjs-fullscreen video.video-js { position: absolute; width: 100%; height: 100%; }
|
||||
|
||||
.vjs-controls { display: none; position: absolute; margin: 0; padding: 0; border: none; }
|
||||
@ -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 */
|
||||
|
||||
@ -34,10 +34,18 @@ 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;
|
||||
|
||||
this.buildController();
|
||||
this.showController();
|
||||
|
||||
@ -54,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);
|
||||
@ -68,7 +80,7 @@ var VideoJS = Class.extend({
|
||||
this.progressHolder.addEventListener("mouseup", this.onProgressHolderMouseUp.context(this), false);
|
||||
|
||||
// Set to stored volume OR 85%
|
||||
this.setVolume(localStorage["volume"] || 0.85);
|
||||
this.setVolume(localStorage.volume || 0.85);
|
||||
// Listen for a drag on the volume control
|
||||
this.volumeControl.addEventListener("mousedown", this.onVolumeControlMouseDown.context(this), false);
|
||||
// Listen for a release on the volume control
|
||||
@ -92,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(){
|
||||
@ -281,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);
|
||||
@ -290,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) {
|
||||
@ -401,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);
|
||||
@ -421,8 +460,8 @@ var VideoJS = Class.extend({
|
||||
|
||||
// Set a new volume based on where the user clicked on the volume control
|
||||
setVolume: function(newVol){
|
||||
this.video.volume = newVol;
|
||||
localStorage["volume"] = this.video.volume;
|
||||
this.video.volume = parseFloat(newVol);
|
||||
localStorage.volume = this.video.volume;
|
||||
},
|
||||
|
||||
setVolumeWithEvent: function(event){
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user