web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-09-16 09:26:56 +02:00
Code Releases Activity

Updated to latest version (volume storing, download links)

Browse Source
This commit is contained in:
Steve Heffernan
2010-06-02 22:08:04 -07:00
parent 29d081f1a0
commit 781040ba55
4 changed files with 78 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
index.html
View File

@@ -25,6 +25,11 @@
$(function(){
VideoJS.setup();
})
// If not using a JS library
// window.onload = function(){
// VideoJS.setup();
// }
</script>
</head>
@@ -42,21 +47,30 @@
<h1>Video JS</h1>
<p class="tagline">Open Source HTML5 Video Player</p>
<!-- Begin VideoJS -->
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code (modified for VP8/WebM) http://camendesign.com/code/video_for_everybody -->
<video id="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">
<!-- 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">
<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.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." />
<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"
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://videojs.com">HTML5 Video Player</a> by <a href="http://videojs.com">VideoJS</a>
</p>
</div>
<!-- End VideoJS -->
<p id="video_note">Video clip is from <a href="http://disney.go.com/disneynature/oceans/" title="Oceans">Disney&rsquo;s Oceans</a></p>

31
video-js/demo.html
View File

@@ -3,25 +3,38 @@
<head>
<meta charset="utf-8" />
<title>HTML5 Video Player</title>
<!-- Include the VideoJS Library -->
<script src="video.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
// Run the script on page load.
// If using jQuery
// $(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 id="body">
<body>
<!-- Begin VideoJS -->
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code (modified for VP8/WebM) http://camendesign.com/code/video_for_everybody -->
<!-- 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">
@@ -31,10 +44,18 @@
<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" title="No video playback capabilities." />
<img src="http://video-js.s3.amazonaws.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://videojs.com">HTML5 Video Player</a> by <a href="http://videojs.com">VideoJS</a>
</p>
</div>
<!-- End VideoJS -->
</body>
</html>

1
video-js/video-js.css
View File

@@ -8,6 +8,7 @@ video.video-js { background-color: #000; }
img.vjs-poster { display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; }
.video-js-box p { font-size: small; }
/* DEFAULT SKIN */
/* Using all CSS to draw the controls. Images could be used to simplify the CSS if desired.

47
video-js/video.js
View File

@@ -32,6 +32,9 @@ var VideoJS = Class.extend({
this.num = num;
this.box = element.parentNode;
// Hide no-video download paragraph
this.box.getElementsByClassName("vjs-no-video")[0].style.display = "none";
this.buildPoster();
this.showPoster();
@@ -64,6 +67,8 @@ var VideoJS = Class.extend({
// Listen for a release on the progress bar
this.progressHolder.addEventListener("mouseup", this.onProgressHolderMouseUp.context(this), false);
// Set to stored volume OR 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
@@ -307,7 +312,7 @@ var VideoJS = Class.extend({
this.blockTextSelection();
document.onmousemove = function(event) {
this.setPlayProgress(event.pageX);
this.setPlayProgressWithEvent(event);
}.context(this);
document.onmouseup = function(event) {
@@ -324,14 +329,14 @@ var VideoJS = Class.extend({
// When the user stops dragging on the progress bar, update play position
// Backup for when the user only clicks and doesn't drag
onProgressHolderMouseUp: function(event){
this.setPlayProgress(event.pageX);
this.setPlayProgressWithEvent(event);
},
// Adjust the volume when the user drags on the volume control
onVolumeControlMouseDown: function(event){
this.blockTextSelection();
document.onmousemove = function(event) {
this.setVolume(event.pageX);
this.setVolumeWithEvent(event);
}.context(this);
document.onmouseup = function() {
this.unblockTextSelection();
@@ -343,7 +348,7 @@ var VideoJS = Class.extend({
// When the user stops dragging, set a new volume
// Backup for when the user only clicks and doesn't drag
onVolumeControlMouseUp: function(event){
this.setVolume(event.pageX);
this.setVolumeWithEvent(event);
},
// When the user clicks on the fullscreen button, update fullscreen setting
@@ -358,7 +363,7 @@ var VideoJS = Class.extend({
onVideoMouseMove: function(event){
this.showController();
clearInterval(this.mouseMoveTimeout);
this.mouseMoveTimeout = setTimeout(function(){this.hideController(); }.context(this), 4000);
this.mouseMoveTimeout = setTimeout(function(){ this.hideController(); }.context(this), 4000);
},
onVideoMouseOut: function(event){
@@ -397,12 +402,16 @@ var VideoJS = Class.extend({
},
// Update the play position based on where the user clicked on the progresss bar
setPlayProgress: function(clickX) {
var newPercent = Math.max(0, Math.min(1, (clickX - this.findPosX(this.progressHolder)) / this.progressHolder.offsetWidth));
this.video.currentTime = newPercent * this.video.duration
this.playProgress.style.width = newPercent * (this.progressHolder.offsetWidth - 2) + "px";
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);
},
// Update the displayed time (00:00)
updateTimeDisplay: function(){
@@ -411,14 +420,14 @@ var VideoJS = Class.extend({
},
// Set a new volume based on where the user clicked on the volume control
setVolume: function(clickX) {
var newVol = (clickX - this.findPosX(this.volumeControl)) / this.volumeControl.offsetWidth;
if (newVol > 1) {
newVol = 1;
} else if (newVol < 0) {
newVol = 0;
}
setVolume: function(newVol){
this.video.volume = newVol;
localStorage["volume"] = this.video.volume;
},
setVolumeWithEvent: function(event){
var newVol = this.getRelativePosition(event.pageX, this.volumeControl);
this.setVolume(newVol);
},
// Update the volume control display
@@ -489,6 +498,11 @@ var VideoJS = Class.extend({
return minutes + ":" + seconds;
},
// Return the relative horizonal position of an event as a value from 0-1
getRelativePosition: function(x, relativeElement){
return Math.max(0, Math.min(1, (x - this.findPosX(relativeElement)) / relativeElement.offsetWidth));
},
// Get an objects position on the page
findPosX: function(obj) {
var curleft = obj.offsetLeft;
@@ -497,7 +511,6 @@ var VideoJS = Class.extend({
}
return curleft;
}
})
// Class Methods