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

Updating to latest version.

Browse Source
This commit is contained in:
Steve Heffernan 2010-05-27 12:00:17 -07:00
parent 0373a58850
commit b3a35c0aa4
2 changed files with 43 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
video-js/demo.html
View File

@ -20,6 +20,7 @@
</head>
<body id="body">
<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.s3.amazonaws.com/oceans-clip.png" autobuffer>
<source src="http://video-js.s3.amazonaws.com/oceans-clip.mp4" type="video/mp4">
@ -33,6 +34,7 @@
<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>
</div>
</body>
</html>

32
video-js/video.js
View File

@ -14,8 +14,7 @@ var VideoJS = Class.extend({
this.video = element;
this.buildController();
this.showController(); // has to come before positioning
this.positionController();
this.showController();
// Listen for when the video is played
this.video.addEventListener("play", this.onPlay.context(this), false);
@ -169,10 +168,14 @@ var VideoJS = Class.extend({
// Show the controller
showController: function(){
this.controls.style.display = "block";
this.positionController();
},
// Place controller relative to the video's position
positionController: function(){
// Make sure the controls are visible
if (this.controls.style.display == 'none') return;
this.controls.style.top = (this.video.offsetHeight - this.controls.offsetHeight) + "px";
this.controls.style.left = "0px";
this.controls.style.width = this.video.offsetWidth + "px";
@ -315,6 +318,7 @@ var VideoJS = Class.extend({
// Ajust the play progress bar's width based on the current play time
updatePlayProgress: function(){
if (this.controls.style.display == 'none') return;
this.playProgress.style.width = ((this.video.currentTime / this.video.duration) * (this.progressHolder.offsetWidth - 2)) + "px";
this.updateTimeDisplay();
},
@ -363,7 +367,21 @@ var VideoJS = Class.extend({
this.videoIsFullScreen = true;
this.videoOrigWidth = this.video.offsetWidth;
this.videoOrigHeight = this.video.offsetHeight;
this.docOrigOverflow = document.documentElement.style.overflow;
// Hide any scroll bars
document.documentElement.style.overflow = 'hidden';
this.fullscreenControl.className = "vjs-fullscreen-control vjs-fs-active";
// Watch for when the window is resized and resize the video to match.
this.fullWindowResize = window.addEventListener('resize', this.sizeToWindow.context(this), false);
// Resize the video to the window
this.sizeToWindow();
},
// Resize the video to the full window
sizeToWindow: function(){
this.video.style.width = window.innerWidth + "px";
this.video.style.height = window.innerHeight + "px";
this.video.style.position = "fixed";
@ -371,13 +389,19 @@ var VideoJS = Class.extend({
this.video.style.top = 0;
this.controls.style.position = "fixed";
this.positionController();
this.fullscreenControl.className = "vjs-fullscreen-control vjs-fs-active";
},
// Turn off fullscreen (window) mode
fullscreenOff: function(){
this.videoIsFullScreen = false;
// Unhide scroll bars.
document.documentElement.style.overflow = this.docOrigOverflow;
// Remove window resizing event listener
window.removeEventListener('resize', this.sizeToWindow.context(this), false);
// Resize to original settings
this.video.style.width = this.videoOrigWidth + "px";
this.video.style.height = this.videoOrigHeight + "px";
this.video.style.position = "static";