mirror of
https://github.com/videojs/video.js.git
synced 2025-03-17 21:18:27 +02:00
Upated to new version of video-js
Moved setup to right after the video
This commit is contained in:
Steve Heffernan
parent
898489afdc
commit
044d9dead5
14
index.html
14
index.html
@ -4,13 +4,6 @@
|
||||
<meta charset="utf-8" />
|
||||
<title>Video JS | HTML5 Video Player</title>
|
||||
<script src="video-js/video.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
|
||||
var bodyLoaded = function(){
|
||||
VideoJS.setup();
|
||||
}
|
||||
|
||||
</script>
|
||||
<link rel="stylesheet" href="stylesheets/base.css" type="text/css" media="all" charset="utf-8" />
|
||||
<link rel="stylesheet" href="video-js/video-js.css" type="text/css" media="all" charset="utf-8" />
|
||||
<link rel="stylesheet" href="stylesheets/site.css" type="text/css" media="all" charset="utf-8" />
|
||||
@ -36,7 +29,7 @@
|
||||
<h1>Video JS</h1>
|
||||
<p class="tagline">Open Source HTML5 Video Player</p>
|
||||
|
||||
<div class="video-box">
|
||||
<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"></source>
|
||||
@ -51,6 +44,11 @@
|
||||
</object>
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
VideoJS.setup();
|
||||
</script>
|
||||
|
||||
<p id="video_note">Video clip is from <a href="http://disney.go.com/disneynature/oceans/" title="Oceans">Disney’s Oceans</a></p>
|
||||
|
||||
<p>Video JS is a javascript-based video player that uses the HTML5 video functionality built into advanced browsers. In general, the benefit of using an HTML5 player is a consistent look between browsers.</p>
|
||||
|
||||
@ -14,7 +14,7 @@ ul#nav { list-style: none; margin: 0; padding: 0; height: 20px; text-align: righ
|
||||
ul#nav li { display: inline; list-style: none; margin: 0; padding: 0; padding-left: 20px; font-size: 120%; line-height: 20px; }
|
||||
ul#nav li a { color: #fff; text-decoration: none; }
|
||||
|
||||
.video-box { margin-bottom: 0; background-color: #000; }
|
||||
.video-js-box { margin-bottom: 0; background-color: #000; }
|
||||
p#video_note { margin-bottom: 20px; font-size: 100%; line-height: 20px; color: #999; text-align: center; }
|
||||
|
||||
#features_and_support { }
|
||||
|
||||
21
video-js/LICENSE.txt
Normal file
21
video-js/LICENSE.txt
Normal file
@ -0,0 +1,21 @@
|
||||
The MIT License
|
||||
|
||||
Copyright (c) 2010 Zencoder, Inc.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
3
video-js/README.markdown
Normal file
3
video-js/README.markdown
Normal file
@ -0,0 +1,3 @@
|
||||
video.js
|
||||
--------
|
||||
Based on the tutorial at http://blog.steveheffernan.com/2010/04/how-to-build-an-html5-video-player/
|
||||
38
video-js/demo.html
Normal file
38
video-js/demo.html
Normal file
@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>HTML5 Video Player</title>
|
||||
<script src="video.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
|
||||
// If using jQuery
|
||||
// $(function(){
|
||||
// VideoJS.setup();
|
||||
// })
|
||||
|
||||
window.onload = function(){
|
||||
VideoJS.setup();
|
||||
}
|
||||
|
||||
</script>
|
||||
<link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
|
||||
</head>
|
||||
<body id="body">
|
||||
|
||||
<!-- 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">
|
||||
<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.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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,4 +1,4 @@
|
||||
.video-box { text-align: left; position: relative; }
|
||||
.video-js-box { text-align: left; position: relative; }
|
||||
.video-js { background-color: #000; }
|
||||
|
||||
/* General controls styles */
|
||||
|
||||
@ -13,30 +13,48 @@ var VideoJS = Class.extend({
|
||||
init: function(element, num){
|
||||
this.video = element;
|
||||
|
||||
// Default the player number to 0
|
||||
this.num = (num) ? num : 0;
|
||||
|
||||
this.buildController();
|
||||
this.showController(); // has to come before positioning
|
||||
this.positionController();
|
||||
|
||||
// Listen for when the video is played
|
||||
this.video.addEventListener("play", this.onPlay.context(this), false);
|
||||
// Listen for when the video is paused
|
||||
this.video.addEventListener("pause", this.onPause.context(this), false);
|
||||
// Listen for when the video ends
|
||||
this.video.addEventListener("ended", this.onEnded.context(this), false);
|
||||
// Listen for a volume change
|
||||
this.video.addEventListener('volumechange',this.onVolumeChange.context(this),false);
|
||||
// Listen for video errors
|
||||
this.video.addEventListener('error',this.onError.context(this),false);
|
||||
|
||||
// Listen for clicks on the play/pause button
|
||||
this.playControl.addEventListener("click", this.onPlayControlClick, true);
|
||||
this.playControl.addEventListener("click", this.onPlayControlClick.context(this), false);
|
||||
// Make a click on the video act like a click on the play button.
|
||||
this.video.addEventListener("click", this.onPlayControlClick.context(this), false);
|
||||
|
||||
// Listen for drags on the progress bar
|
||||
this.progressHolder.addEventListener("mousedown", this.onProgressHolderMouseDown, true);
|
||||
this.progressHolder.addEventListener("mousedown", this.onProgressHolderMouseDown.context(this), false);
|
||||
// Listen for a release on the progress bar
|
||||
this.progressHolder.addEventListener("mouseup", this.onProgressHolderMouseUp, true);
|
||||
this.progressHolder.addEventListener("mouseup", this.onProgressHolderMouseUp.context(this), false);
|
||||
|
||||
// Listen for a drag on the volume control
|
||||
this.volumeControl.addEventListener("mousedown", this.onVolumeControlMouseDown, true);
|
||||
this.volumeControl.addEventListener("mousedown", this.onVolumeControlMouseDown.context(this), false);
|
||||
// Listen for a release on the volume control
|
||||
this.volumeControl.addEventListener("mouseup", this.onVolumeControlMouseUp, true);
|
||||
this.volumeControl.addEventListener("mouseup", this.onVolumeControlMouseUp.context(this), false);
|
||||
// Set the display to the initial volume
|
||||
this.updateVolumeDisplay();
|
||||
|
||||
// Listen for clicks on the fullscreen button
|
||||
this.fullscreenControl.addEventListener("click", this.onFullscreenControlClick, true);
|
||||
// Listen for clicks on the button
|
||||
this.fullscreenControl.addEventListener("click", this.onFullscreenControlClick.context(this), false);
|
||||
|
||||
// Listen for the mouse over the video. Used to reveal the controller.
|
||||
this.video.addEventListener("mouseover", this.onVideoMouseOver.context(this), false);
|
||||
// Listen for the mouse moving out of the video. Used to hide the controller.
|
||||
this.video.addEventListener("mouseout", this.onVideoMouseOut.context(this), false);
|
||||
// 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);
|
||||
},
|
||||
|
||||
buildController: function(){
|
||||
@ -52,7 +70,7 @@ var VideoJS = Class.extend({
|
||||
<span class="vjs-load-progress"></span><span class="vjs-play-progress"></span>
|
||||
</li>
|
||||
<li class="vjs-progress-time">
|
||||
<span class="vjs-current-time-display">00:00</span> / <span class="vjs-duration-display">00:00</span>
|
||||
<span class="vjs-current-time-display">00:00</span><span> / </span><span class="vjs-duration-display">00:00</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
@ -69,6 +87,8 @@ var VideoJS = Class.extend({
|
||||
</ul>
|
||||
*/
|
||||
|
||||
|
||||
|
||||
// Create a list element to hold the different controls
|
||||
this.controls = document.createElement("ul");
|
||||
|
||||
@ -121,8 +141,10 @@ var VideoJS = Class.extend({
|
||||
this.currentTimeDisplay.className = "vjs-current-time-display";
|
||||
this.currentTimeDisplay.innerHTML = '00:00';
|
||||
|
||||
// Adding a slash for visual separation
|
||||
this.progressTime.innerHTML += " / ";
|
||||
// Add time separator
|
||||
this.timeSeparator = document.createElement("span");
|
||||
this.timeSeparator.innerHTML = " / ";
|
||||
this.progressTime.appendChild(this.timeSeparator);
|
||||
|
||||
// Create the total duration display
|
||||
this.durationDisplay = document.createElement("span");
|
||||
@ -162,97 +184,119 @@ var VideoJS = Class.extend({
|
||||
this.controls.style.display = "none";
|
||||
},
|
||||
|
||||
// React to clicks on the play/pause button
|
||||
onPlayControlClick: function(e){
|
||||
var player = videoJSPlayers[this.parentNode.getAttribute("data-video-js")];
|
||||
if (player.video.paused) {
|
||||
player.playVideo();
|
||||
} else {
|
||||
player.pauseVideo();
|
||||
}
|
||||
},
|
||||
|
||||
// Adjust the play position when the user drags on the progress bar
|
||||
onProgressHolderMouseDown: function(e){
|
||||
var player = videoJSPlayers[this.parentNode.parentNode.parentNode.getAttribute("data-video-js")];
|
||||
player.stopTrackingPlayProgress();
|
||||
|
||||
if (player.video.paused) {
|
||||
player.videoWasPlaying = false;
|
||||
} else {
|
||||
player.videoWasPlaying = true;
|
||||
player.video.pause();
|
||||
}
|
||||
|
||||
player.blockTextSelection();
|
||||
document.onmousemove = function(e) {
|
||||
player.setPlayProgress(e.pageX);
|
||||
}
|
||||
|
||||
document.onmouseup = function() {
|
||||
player.unblockTextSelection();
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
if (player.videoWasPlaying) {
|
||||
player.video.play();
|
||||
player.trackPlayProgress();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 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(e){
|
||||
var player = videoJSPlayers[this.parentNode.parentNode.parentNode.getAttribute("data-video-js")];
|
||||
player.setPlayProgress(e.pageX);
|
||||
},
|
||||
|
||||
// Adjust the volume when the user drags on the volume control
|
||||
onVolumeControlMouseDown: function(e){
|
||||
var player = videoJSPlayers[this.parentNode.getAttribute("data-video-js")];
|
||||
player.blockTextSelection();
|
||||
document.onmousemove = function(e) {
|
||||
player.setVolume(e.pageX);
|
||||
}
|
||||
document.onmouseup = function() {
|
||||
player.unblockTextSelection();
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
}
|
||||
},
|
||||
|
||||
// When the user stops dragging, set a new volume
|
||||
// Backup for when the user only clicks and doesn't drag
|
||||
onVolumeControlMouseUp: function(e){
|
||||
var player = videoJSPlayers[this.parentNode.getAttribute("data-video-js")];
|
||||
player.setVolume(e.pageX);
|
||||
},
|
||||
|
||||
// When the user clicks on the fullscreen button, update fullscreen setting
|
||||
onFullscreenControlClick: function(e){
|
||||
var player = videoJSPlayers[this.parentNode.getAttribute("data-video-js")];
|
||||
if (!player.videoIsFullScreen) {
|
||||
player.fullscreenOn();
|
||||
} else {
|
||||
player.fullscreenOff();
|
||||
}
|
||||
},
|
||||
|
||||
// Play the video
|
||||
playVideo: function(){
|
||||
this.video.play();
|
||||
// When the video is played
|
||||
onPlay: function(event){
|
||||
this.playControl.className = "vjs-play-control vjs-pause";
|
||||
this.trackPlayProgress();
|
||||
},
|
||||
|
||||
// Pause the video
|
||||
pauseVideo: function(){
|
||||
this.video.pause();
|
||||
// When the video is paused
|
||||
onPause: function(event){
|
||||
this.playControl.className = "vjs-play-control vjs-play";
|
||||
this.stopTrackingPlayProgress();
|
||||
},
|
||||
|
||||
// Adjust the width of the progress bar to fill the controls width
|
||||
// When the video ends
|
||||
onEnded: function(event){
|
||||
this.video.pause();
|
||||
this.onPause();
|
||||
},
|
||||
|
||||
onVolumeChange: function(event){
|
||||
this.updateVolumeDisplay();
|
||||
},
|
||||
|
||||
onError: function(event){
|
||||
console.log(event);
|
||||
console.log(this.video.error);
|
||||
},
|
||||
|
||||
// React to clicks on the play/pause button
|
||||
onPlayControlClick: function(event){
|
||||
if (this.video.paused) {
|
||||
this.video.play();
|
||||
} else {
|
||||
this.video.pause();
|
||||
}
|
||||
},
|
||||
|
||||
// Adjust the play position when the user drags on the progress bar
|
||||
onProgressHolderMouseDown: function(event){
|
||||
this.stopTrackingPlayProgress();
|
||||
|
||||
if (this.video.paused) {
|
||||
this.videoWasPlaying = false;
|
||||
} else {
|
||||
this.videoWasPlaying = true;
|
||||
this.video.pause();
|
||||
}
|
||||
|
||||
this.blockTextSelection();
|
||||
document.onmousemove = function(event) {
|
||||
this.setPlayProgress(event.pageX);
|
||||
}.context(this);
|
||||
|
||||
document.onmouseup = function(event) {
|
||||
this.unblockTextSelection();
|
||||
document.onmousemove = null;
|
||||
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
|
||||
// Backup for when the user only clicks and doesn't drag
|
||||
onProgressHolderMouseUp: function(event){
|
||||
this.setPlayProgress(event.pageX);
|
||||
},
|
||||
|
||||
// Adjust the volume when the user drags on the volume control
|
||||
onVolumeControlMouseDown: function(event){
|
||||
this.blockTextSelection();
|
||||
document.onmousemove = function(event) {
|
||||
this.setVolume(event.pageX);
|
||||
}.context(this);
|
||||
document.onmouseup = function() {
|
||||
this.unblockTextSelection();
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
}.context(this);
|
||||
},
|
||||
|
||||
// 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);
|
||||
},
|
||||
|
||||
// When the user clicks on the fullscreen button, update fullscreen setting
|
||||
onFullscreenControlClick: function(event){
|
||||
if (!this.videoIsFullScreen) {
|
||||
this.fullscreenOn();
|
||||
} else {
|
||||
this.fullscreenOff();
|
||||
}
|
||||
},
|
||||
|
||||
onVideoMouseOver: function(event){
|
||||
this.showController();
|
||||
},
|
||||
|
||||
onVideoMouseOut: function(event){
|
||||
// Prevent flicker by making sure mouse hasn't left the video
|
||||
var parent = event.relatedTarget;
|
||||
while (parent && parent !== this.video && parent !== this.controls) {
|
||||
parent = parent.parentNode;
|
||||
}
|
||||
if (parent !== this.video && parent !== this.controls) {
|
||||
this.hideController();
|
||||
}
|
||||
},
|
||||
|
||||
// Adjust the width of the progress bar to fill the controls width
|
||||
sizeProgressBar: function(){
|
||||
this.progressControl.style.width = (this.controls.offsetWidth - 125) + "px";
|
||||
this.progressHolder.style.width = (this.progressControl.offsetWidth - 80) + "px";
|
||||
@ -261,8 +305,7 @@ var VideoJS = Class.extend({
|
||||
|
||||
// Track & display the current play progress
|
||||
trackPlayProgress: function(){
|
||||
context = this;
|
||||
this.playProgressInterval = setInterval(function(){ context.updatePlayProgress(); }, 33);
|
||||
this.playProgressInterval = setInterval(function(){ this.updatePlayProgress(); }.context(this), 33);
|
||||
},
|
||||
|
||||
// Turn off play progress tracking (when paused)
|
||||
@ -299,7 +342,6 @@ var VideoJS = Class.extend({
|
||||
newVol = 0;
|
||||
}
|
||||
this.video.volume = newVol;
|
||||
this.updateVolumeDisplay();
|
||||
},
|
||||
|
||||
// Update the volume control display
|
||||
@ -380,10 +422,28 @@ var VideoJS = Class.extend({
|
||||
|
||||
// Add video-js to any video tag with the class
|
||||
VideoJS.setup = function(){
|
||||
var videoTags = document.getElementsByTagName("video");
|
||||
for (var i=0;i<videoTags.length;i++) {
|
||||
if (videoTags[i].className.indexOf("video-js") != -1) {
|
||||
videoJSPlayers[i] = new VideoJS(document.getElementById("video"), i);
|
||||
if (VideoJS.supportsVideo()) {
|
||||
var videoTags = document.getElementsByTagName("video");
|
||||
for (var i=0;i<videoTags.length;i++) {
|
||||
if (videoTags[i].className.indexOf("video-js") != -1) {
|
||||
videoJSPlayers[i] = new VideoJS(videoTags[i], i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Check if the browser supports video.
|
||||
VideoJS.supportsVideo = function() {
|
||||
return !!document.createElement('video').canPlayType;
|
||||
}
|
||||
|
||||
|
||||
// Allows for binding context to functions
|
||||
// when using in event listeners and timeouts
|
||||
Function.prototype.context = function(obj) {
|
||||
var method = this
|
||||
temp = function() {
|
||||
return method.apply(obj, arguments)
|
||||
}
|
||||
return temp
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user