web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-11-24 08:42:25 +02:00
Code Releases Activity

Made initial click & hold trigger new value on progress and volume.

Browse Source 
Made controls not hide when hovering over them.
Changed a document.onmousemove to an eventListener to prevent conflicts.
This commit is contained in:
Steve Heffernan 2010-09-25 22:28:04 -07:00
parent 632f929731
commit 79ef734914
3 changed files with 77 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.markdown
View File

@ -132,8 +132,11 @@ Changelog
1.1.3 1.1.3
- Feature: Width/Height functions for resizing the player - Feature: Width/Height functions for resizing the player
- Feature: Made initial click & hold trigger new value on progress and volume
- Feature: Made controls not hide when hovering over them
- Fix: Removed trailing comma that was breaking IE7 - Fix: Removed trailing comma that was breaking IE7
- Fix: Removed some vars from global scope - Fix: Removed some vars from global scope
- Fix: Changed a document.onmousemove to an eventListener to prevent conflicts
1.1.2 (2010-09-20) 1.1.2 (2010-09-20)

6
demo.html
View File

@ -7,7 +7,7 @@
<!-- Include the VideoJS Library --> <!-- Include the VideoJS Library -->
<script src="video.js" type="text/javascript" charset="utf-8"></script> <script src="video.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript">
// Must come after the video.js library // Must come after the video.js library
// Add VideoJS to all video tags on the page when the DOM is ready // Add VideoJS to all video tags on the page when the DOM is ready
@ -64,14 +64,14 @@
</script> </script>
<!-- Include the VideoJS Stylesheet --> <!-- Include the VideoJS Stylesheet -->
<link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8"> <link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS">
</head> </head>
<body> <body>
<!-- Begin VideoJS --> <!-- Begin VideoJS -->
<div class="video-js-box"> <div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody --> <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<video id="example_video_1" class="video-js" width="640" height="264" preload poster="http://video-js.zencoder.com/oceans-clip.png" controls> <video id="example_video_1" class="video-js" width="640" height="264" controls="controls" preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'>

110
video.js
View File

@ -1,4 +1,7 @@
/* /*
VideoJS - HTML5 Video Player
v1.1.3
This file is part of VideoJS. Copyright 2010 Zencoder, Inc. This file is part of VideoJS. Copyright 2010 Zencoder, Inc.
VideoJS is free software: you can redistribute it and/or modify VideoJS is free software: you can redistribute it and/or modify
@ -163,13 +166,25 @@ var VideoJS = JRClass.extend({
this.poster.addEventListener("mouseout", this.onVideoMouseOut.context(this), false); this.poster.addEventListener("mouseout", this.onVideoMouseOut.context(this), false);
} }
// Have to add the mouseout to the controller too or it may not hide. // Block hiding when over controls
// For some reason the same isn't needed for mouseover this.controls.addEventListener("mousemove", this.onControlsMouseMove.context(this), false);
this.controls.addEventListener("mouseout", this.onVideoMouseOut.context(this), false);
// Release controls hiding block, and call VideoMouseOut
this.controls.addEventListener("mouseout", this.onControlsMouseOut.context(this), false);
// Load subtitles. Based on http://matroska.org/technical/specs/subtitles/srt.html
this.subtitlesSource = this.video.getAttribute("data-subtitles");
if (this.subtitlesSource !== null) {
this.loadSubtitles();
this.buildSubtitles();
}
/* Removeable Event Listeners with Context
================================================================================ */
// Creating during initialization to add context
// and because it has to be removed with removeEventListener
// Create listener for esc key while in full screen mode // Create listener for esc key while in full screen mode
// Creating it during initialization to add context
// and because it has to be removed with removeEventListener
this.onEscKey = function(event){ this.onEscKey = function(event){
if (event.keyCode == 27) { if (event.keyCode == 27) {
this.fullscreenOff(); this.fullscreenOff();
@ -180,30 +195,49 @@ var VideoJS = JRClass.extend({
this.positionController(); this.positionController();
}.context(this); }.context(this);
// Load subtitles. Based on http://matroska.org/technical/specs/subtitles/srt.html this.onProgressMouseMove = function(event){
this.subtitlesSource = this.video.getAttribute("data-subtitles"); this.setPlayProgressWithEvent(event);
if (this.subtitlesSource !== null) { }.context(this);
this.loadSubtitles();
this.buildSubtitles(); this.onProgressMouseUp = function(event){
} _V_.unblockTextSelection();
document.removeEventListener("mousemove", this.onProgressMouseMove, false);
document.removeEventListener("mouseup", this.onProgressMouseUp, false);
if (this.videoWasPlaying) {
this.video.play();
this.trackPlayProgress();
}
}.context(this);
this.onVolumeMouseMove = function(event){
this.setVolumeWithEvent(event);
}.context(this);
this.onVolumeMouseUp = function(event){
_V_.unblockTextSelection();
document.removeEventListener("mousemove", this.onVolumeMouseMove, false);
document.removeEventListener("mouseup", this.onVolumeMouseUp, false);
}.context(this);
}, },
// Support older browsers that used "autobuffer" // Support older browsers that used "autobuffer"
fixPreloading: function(){ fixPreloading: function(){
if (typeof this.video.hasAttribute == "function" && this.video.hasAttribute("preload")) { if (typeof this.video.hasAttribute == "function" && this.video.hasAttribute("preload")) {
this.video.autobuffer = true; this.video.autobuffer = true; // Was a boolean
this.video.load(); this.video.load();
} else { } else {
this.video.preload = false;
this.video.autobuffer = false; this.video.autobuffer = false;
this.video.preload = "none";
} }
}, },
// Translate functionality // Translate functionality
play: function(){ this.video.play(); }, play: function(){ this.video.play(); },
pause: function(){ this.video.pause(); }, pause: function(){ this.video.pause(); },
width: function(width){ width: function(width){
this.video.width = width; this.video.width = width;
this.box.width = width; this.box.width = width;
// Width isn't working for the poster // Width isn't working for the poster
@ -211,7 +245,7 @@ var VideoJS = JRClass.extend({
this.positionController(); this.positionController();
return this; return this;
}, },
height: function(height){ height: function(height){
this.video.height = height; this.video.height = height;
this.box.height = height; this.box.height = height;
this.poster.style.height = height+"px"; this.poster.style.height = height+"px";
@ -384,7 +418,7 @@ var VideoJS = JRClass.extend({
// Hide the controller // Hide the controller
hideController: function(){ hideController: function(){
if (this.options.controlsHiding) { this.controls.style.display = "none"; } if (this.options.controlsHiding && !this.mouseIsOverControls) { this.controls.style.display = "none"; }
}, },
// Update poster source from attribute or fallback image // Update poster source from attribute or fallback image
@ -534,19 +568,11 @@ var VideoJS = JRClass.extend({
} }
_V_.blockTextSelection(); _V_.blockTextSelection();
document.onmousemove = function(event) {
this.setPlayProgressWithEvent(event);
}.context(this);
document.onmouseup = function(event) { this.setPlayProgressWithEvent(event);
_V_.unblockTextSelection(); document.addEventListener("mousemove", this.onProgressMouseMove, false);
document.onmousemove = null; document.addEventListener("mouseup", this.onProgressMouseUp, false);
document.onmouseup = null;
if (this.videoWasPlaying) {
this.video.play();
this.trackPlayProgress();
}
}.context(this);
}, },
// When the user stops dragging on the progress bar, update play position // When the user stops dragging on the progress bar, update play position
@ -554,7 +580,7 @@ var VideoJS = JRClass.extend({
onProgressHolderMouseUp: function(event){ onProgressHolderMouseUp: function(event){
this.setPlayProgressWithEvent(event); this.setPlayProgressWithEvent(event);
// Fixe for an apparent play button state issue. // Fixe for a play button state issue.
if (this.video.paused) { if (this.video.paused) {
this.onPause(); this.onPause();
} else { } else {
@ -565,14 +591,9 @@ var VideoJS = JRClass.extend({
// Adjust the volume when the user drags on the volume control // Adjust the volume when the user drags on the volume control
onVolumeControlMouseDown: function(event){ onVolumeControlMouseDown: function(event){
_V_.blockTextSelection(); _V_.blockTextSelection();
document.onmousemove = function(event) { this.setVolumeWithEvent(event);
this.setVolumeWithEvent(event); document.addEventListener("mousemove", this.onVolumeMouseMove, false);
}.context(this); document.addEventListener("mouseup", this.onVolumeMouseUp, false);
document.onmouseup = function() {
_V_.unblockTextSelection();
document.onmousemove = null;
document.onmouseup = null;
}.context(this);
}, },
// When the user stops dragging, set a new volume // When the user stops dragging, set a new volume
@ -590,7 +611,18 @@ var VideoJS = JRClass.extend({
} }
}, },
onVideoMouseMove: function(event){ onControlsMouseMove: function(){
// Block controls from hiding when mouse is over them.
this.mouseIsOverControls = true;
},
onControlsMouseOut: function(event){
this.mouseIsOverControls = false;
// Have to add the video mouseout to the controller too or it may not hide.
this.onVideoMouseOut(event);
},
onVideoMouseMove: function(){
this.showController(); this.showController();
clearInterval(this.mouseMoveTimeout); clearInterval(this.mouseMoveTimeout);
this.mouseMoveTimeout = setTimeout(function(){ this.hideController(); }.context(this), 4000); this.mouseMoveTimeout = setTimeout(function(){ this.hideController(); }.context(this), 4000);
@ -868,7 +900,7 @@ var VideoJS = JRClass.extend({
// this.options.controlsHiding = false; // this.options.controlsHiding = false;
// }, // },
/* The "force the source" fix should hopefully fix this as well now. /* The "force the source" fix should hopefully fix this as well now.
Not sure if canPlayType works on Android though. */ Not sure if canPlayType works on Android though. */
// For Androids, add the MP4 source directly to the video tag otherwise it will not play // For Androids, add the MP4 source directly to the video tag otherwise it will not play
// androidFix: function() { // androidFix: function() {