Skip to content

Commit

Permalink
Adding docs.
Browse files Browse the repository at this point in the history 
Changed Video.player to Video.fn (like jQuery), so player can be used to get the player for a video.
  • Loading branch information
@heff
heff committed Dec 16, 2010
1 parent b97718d commit 81aef82
Show file tree
Hide file tree
Showing 14 changed files with 610 additions and 239 deletions.
11 changes: 9 additions & 2 deletions README.markdown
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
VideoJS - [HTML5 Video Player](http://videojs.com)
==================================================
Version 2.0.1
Version 2.0.2

View [VideoJS.com](http://videojs.com) for a demo and overview.

Expand Down Expand Up @@ -131,8 +131,15 @@ Coming Next

Changelog
---------
2.0.2 ()
2.0.3

- Feature: Setup method now has a callback, so you can more easily work with the player after setup
- Changes: setupAllWhenReady is now just setupAll (backward compatible)

2.0.2 (2010-12-10)

- Feature: Rewrote and optimized subtitle code.
- Feature: Protecting against volume ranges outside of 1 and 0.
- Fix: Bug in Safari for Mac OS 10.5 (Leopard) that was breaking fullscreen.

2.0.1 (2010-11-22)
Expand Down
78 changes: 40 additions & 38 deletions dev/flowplayer/test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Video Player</title>
<title>HTML5 Video Player: flowplayer</title>

<!-- Include the VideoJS Library -->
<script src="../src/video.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/html5.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/behaviors.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/lib.js" type="text/javascript" charset="utf-8"></script>

<!-- <script type="text/javascript" src="flowplayer-3.2.4.min.js"></script> -->
<script type="text/javascript" src="video-js.flowplayer.js"></script>
Expand All @@ -17,45 +18,46 @@
myPlayer = VideoJS.setup("example_video_1", {
controlsHiding: true,
controlsBelow: false,
showControlsAtStart: true
showControlsAtStart: true,
playerFallbackOrder: ["flash", "html5", "links"]
});
myPlayer.activateElement(document.getElementById("scrub"), "loadProgressBar");
var vid = document.getElementById("example_video_1"),
attrTable = document.getElementById("attributes"),
attrNames = ["error", "networkState", "readyState", "preload", "buffered",
"seeking", "currentTime", "initialTime", "duration", "startOffsetTime",
"paused", "defaultPlaybackRate", "playbackRate", "played", "seekable",
"ended", "autoplay", "loop", "controls", "volume", "muted", "tracks"
],
attrs = {};

for(var i=0,j=attrNames.length; i<j; i++) {
var row = _V_.createElement("tr");
var th = _V_.createElement("th");
th.innerHTML = attrNames[i];
attrs[attrNames[i]] = _V_.createElement("td", { id: attrNames[i] });
row.appendChild(th); row.appendChild(attrs[attrNames[i]]);
attrTable.appendChild(row);
}

setInterval(function(){
for(var i=0,j=attrNames.length; i<j; i++) {
attrs[attrNames[i]].innerHTML = vid[attrNames[i]];
}
}, 100);

var events = ["loadstart","progress","suspend","abort","error","emptied","stalled","play","pause",
"loadedmetadata", "loadeddata", "waiting", "playing", "canplay", "canplaythrough", "seeking", "seeked",
// "timeupdate",
"ended", "ratechange", "durationchange","volumechange"
],
eventsList = document.getElementById("events");

for(var i=0,j=events.length; i<j; i++) {
vid.addEventListener(events[i], function(){
eventsList.innerHTML = this + "\n" + eventsList.innerHTML
}.context(events[i]), false);
}
// var vid = document.getElementById("example_video_1"),
// attrTable = document.getElementById("attributes"),
// attrNames = ["error", "networkState", "readyState", "preload", "buffered",
// "seeking", "currentTime", "initialTime", "duration", "startOffsetTime",
// "paused", "defaultPlaybackRate", "playbackRate", "played", "seekable",
// "ended", "autoplay", "loop", "controls", "volume", "muted", "tracks"
// ],
// attrs = {};
//
// for(var i=0,j=attrNames.length; i<j; i++) {
// var row = _V_.createElement("tr");
// var th = _V_.createElement("th");
// th.innerHTML = attrNames[i];
// attrs[attrNames[i]] = _V_.createElement("td", { id: attrNames[i] });
// row.appendChild(th); row.appendChild(attrs[attrNames[i]]);
// attrTable.appendChild(row);
// }
//
// setInterval(function(){
// for(var i=0,j=attrNames.length; i<j; i++) {
// attrs[attrNames[i]].innerHTML = vid[attrNames[i]];
// }
// }, 100);
//
// var events = ["loadstart","progress","suspend","abort","error","emptied","stalled","play","pause",
// "loadedmetadata", "loadeddata", "waiting", "playing", "canplay", "canplaythrough", "seeking", "seeked",
// // "timeupdate",
// "ended", "ratechange", "durationchange","volumechange"
// ],
// eventsList = document.getElementById("events");
//
// for(var i=0,j=events.length; i<j; i++) {
// vid.addEventListener(events[i], function(){
// eventsList.innerHTML = this + "\n" + eventsList.innerHTML
// }.context(events[i]), false);
// }

});

Expand Down
1 change: 1 addition & 0 deletions dev/flowplayer/video-js.flowplayer.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dev/src/_begin.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*
VideoJS - HTML5 Video Player
v2.0.1
v2.0.2
This file is part of VideoJS. Copyright 2010 Zencoder, Inc.
Expand Down
70 changes: 35 additions & 35 deletions dev/src/behaviors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

/* Player Behaviors - How VideoJS reacts to what the video is doing.
================================================================================ */
VideoJS.player.newBehavior("player", function(player){
VideoJS.fn.newBehavior("player", function(player){
this.onError(this.playerOnVideoError);
// Listen for when the video is played
this.onPlay(this.playerOnVideoPlay);
Expand Down Expand Up @@ -87,7 +87,7 @@ VideoJS.player.newBehavior("player", function(player){
);
/* Mouse Over Video Reporter Behaviors - i.e. Controls hiding based on mouse location
================================================================================ */
VideoJS.player.newBehavior("mouseOverVideoReporter", function(element){
VideoJS.fn.newBehavior("mouseOverVideoReporter", function(element){
// Listen for the mouse move the video. Used to reveal the controller.
_V_.addListener(element, "mousemove", this.mouseOverVideoReporterOnMouseMove.context(this));
// Listen for the mouse moving out of the video. Used to hide the controller.
Expand All @@ -112,7 +112,7 @@ VideoJS.player.newBehavior("mouseOverVideoReporter", function(element){
);
/* Mouse Over Video Reporter Behaviors - i.e. Controls hiding based on mouse location
================================================================================ */
VideoJS.player.newBehavior("box", function(element){
VideoJS.fn.newBehavior("box", function(element){
this.positionBox();
_V_.addClass(element, "vjs-paused");
this.activateElement(element, "mouseOverVideoReporter");
Expand All @@ -131,7 +131,7 @@ VideoJS.player.newBehavior("box", function(element){
);
/* Poster Image Overlay
================================================================================ */
VideoJS.player.newBehavior("poster", function(element){
VideoJS.fn.newBehavior("poster", function(element){
this.activateElement(element, "mouseOverVideoReporter");
this.activateElement(element, "playButton");
this.onPlay(this.hidePoster);
Expand Down Expand Up @@ -165,9 +165,9 @@ VideoJS.player.newBehavior("poster", function(element){
);
/* Control Bar Behaviors
================================================================================ */
VideoJS.player.newBehavior("controlBar", function(element){
if (!this.controlBars) {
this.controlBars = [];
VideoJS.fn.newBehavior("controlBar", function(element){
if (!this.controlBars) {
this.controlBars = [];
this.onResize(this.positionControlBars);
}
this.controlBars.push(element);
Expand All @@ -186,23 +186,23 @@ VideoJS.player.newBehavior("controlBar", function(element){
this.updateLoadProgressBars();
},
hideControlBars: function(){
if (this.options.controlsHiding && !this.mouseIsOverControls) {
if (this.options.controlsHiding && !this.mouseIsOverControls) {
this.each(this.controlBars, function(bar){
bar.style.display = "none";
});
}
},
// Block controls from hiding when mouse is over them.
onControlBarsMouseMove: function(){ this.mouseIsOverControls = true; },
onControlBarsMouseOut: function(event){
this.mouseIsOverControls = false;
onControlBarsMouseOut: function(event){
this.mouseIsOverControls = false;
}
}
);
/* PlayToggle, PlayButton, PauseButton Behaviors
================================================================================ */
// Play Toggle
VideoJS.player.newBehavior("playToggle", function(element){
VideoJS.fn.newBehavior("playToggle", function(element){
if (!this.elements.playToggles) {
this.elements.playToggles = [];
this.onPlay(this.playTogglesOnPlay);
Expand Down Expand Up @@ -233,23 +233,23 @@ VideoJS.player.newBehavior("playToggle", function(element){
}
);
// Play
VideoJS.player.newBehavior("playButton", function(element){
VideoJS.fn.newBehavior("playButton", function(element){
_V_.addListener(element, "click", this.onPlayButtonClick.context(this));
},{
onPlayButtonClick: function(event){ this.play(); }
}
);
// Pause
VideoJS.player.newBehavior("pauseButton", function(element){
VideoJS.fn.newBehavior("pauseButton", function(element){
_V_.addListener(element, "click", this.onPauseButtonClick.context(this));
},{
onPauseButtonClick: function(event){ this.pause(); }
}
);
/* Play Progress Bar Behaviors
================================================================================ */
VideoJS.player.newBehavior("playProgressBar", function(element){
if (!this.playProgressBars) {
VideoJS.fn.newBehavior("playProgressBar", function(element){
if (!this.playProgressBars) {
this.playProgressBars = [];
this.onCurrentTimeUpdate(this.updatePlayProgressBars);
}
Expand All @@ -267,7 +267,7 @@ VideoJS.player.newBehavior("playProgressBar", function(element){
);
/* Load Progress Bar Behaviors
================================================================================ */
VideoJS.player.newBehavior("loadProgressBar", function(element){
VideoJS.fn.newBehavior("loadProgressBar", function(element){
if (!this.loadProgressBars) { this.loadProgressBars = []; }
this.loadProgressBars.push(element);
this.onBufferedUpdate(this.updateLoadProgressBars);
Expand All @@ -282,9 +282,9 @@ VideoJS.player.newBehavior("loadProgressBar", function(element){

/* Current Time Display Behaviors
================================================================================ */
VideoJS.player.newBehavior("currentTimeDisplay", function(element){
if (!this.currentTimeDisplays) {
this.currentTimeDisplays = [];
VideoJS.fn.newBehavior("currentTimeDisplay", function(element){
if (!this.currentTimeDisplays) {
this.currentTimeDisplays = [];
this.onCurrentTimeUpdate(this.updateCurrentTimeDisplays);
}
this.currentTimeDisplays.push(element);
Expand All @@ -303,9 +303,9 @@ VideoJS.player.newBehavior("currentTimeDisplay", function(element){

/* Duration Display Behaviors
================================================================================ */
VideoJS.player.newBehavior("durationDisplay", function(element){
if (!this.durationDisplays) {
this.durationDisplays = [];
VideoJS.fn.newBehavior("durationDisplay", function(element){
if (!this.durationDisplays) {
this.durationDisplays = [];
this.onCurrentTimeUpdate(this.updateDurationDisplays);
}
this.durationDisplays.push(element);
Expand All @@ -321,7 +321,7 @@ VideoJS.player.newBehavior("durationDisplay", function(element){

/* Current Time Scrubber Behaviors
================================================================================ */
VideoJS.player.newBehavior("currentTimeScrubber", function(element){
VideoJS.fn.newBehavior("currentTimeScrubber", function(element){
_V_.addListener(element, "mousedown", this.onCurrentTimeScrubberMouseDown.rEvtContext(this));
},{
// Adjust the play position when the user drags on the progress bar
Expand Down Expand Up @@ -363,8 +363,8 @@ VideoJS.player.newBehavior("currentTimeScrubber", function(element){
);
/* Volume Display Behaviors
================================================================================ */
VideoJS.player.newBehavior("volumeDisplay", function(element){
if (!this.volumeDisplays) {
VideoJS.fn.newBehavior("volumeDisplay", function(element){
if (!this.volumeDisplays) {
this.volumeDisplays = [];
this.onVolumeChange(this.updateVolumeDisplays);
}
Expand Down Expand Up @@ -393,7 +393,7 @@ VideoJS.player.newBehavior("volumeDisplay", function(element){
);
/* Volume Scrubber Behaviors
================================================================================ */
VideoJS.player.newBehavior("volumeScrubber", function(element){
VideoJS.fn.newBehavior("volumeScrubber", function(element){
_V_.addListener(element, "mousedown", this.onVolumeScrubberMouseDown.rEvtContext(this));
},{
// Adjust the volume when the user drags on the volume control
Expand All @@ -405,7 +405,7 @@ VideoJS.player.newBehavior("volumeScrubber", function(element){
_V_.addListener(document, "mousemove", this.onVolumeScrubberMouseMove.rEvtContext(this));
_V_.addListener(document, "mouseup", this.onVolumeScrubberMouseUp.rEvtContext(this));
},
onVolumeScrubberMouseMove: function(event){
onVolumeScrubberMouseMove: function(event){
this.setVolumeWithScrubber(event);
},
onVolumeScrubberMouseUp: function(event){
Expand All @@ -422,7 +422,7 @@ VideoJS.player.newBehavior("volumeScrubber", function(element){
);
/* Fullscreen Toggle Behaviors
================================================================================ */
VideoJS.player.newBehavior("fullscreenToggle", function(element){
VideoJS.fn.newBehavior("fullscreenToggle", function(element){
_V_.addListener(element, "click", this.onFullscreenToggleClick.context(this));
},{
// When the user clicks on the fullscreen button, update fullscreen setting
Expand All @@ -447,7 +447,7 @@ VideoJS.player.newBehavior("fullscreenToggle", function(element){
);
/* Big Play Button Behaviors
================================================================================ */
VideoJS.player.newBehavior("bigPlayButton", function(element){
VideoJS.fn.newBehavior("bigPlayButton", function(element){
if (!this.elements.bigPlayButtons) {
this.elements.bigPlayButtons = [];
this.onPlay(this.bigPlayButtonsOnPlay);
Expand All @@ -460,19 +460,19 @@ VideoJS.player.newBehavior("bigPlayButton", function(element){
bigPlayButtonsOnEnded: function(event){ this.showBigPlayButtons(); },
showBigPlayButtons: function(){
this.each(this.elements.bigPlayButtons, function(element){
element.style.display = "block";
element.style.display = "block";
});
},
hideBigPlayButtons: function(){
this.each(this.elements.bigPlayButtons, function(element){
element.style.display = "none";
element.style.display = "none";
});
}
}
);
/* Spinner
================================================================================ */
VideoJS.player.newBehavior("spinner", function(element){
VideoJS.fn.newBehavior("spinner", function(element){
if (!this.spinners) {
this.spinners = [];
_V_.addListener(this.video, "loadeddata", this.spinnersOnVideoLoadedData.context(this));
Expand Down Expand Up @@ -534,11 +534,11 @@ VideoJS.player.newBehavior("spinner", function(element){
);
/* Subtitles
================================================================================ */
VideoJS.player.newBehavior("subtitlesDisplay", function(element){
if (!this.subtitleDisplays) {
VideoJS.fn.newBehavior("subtitlesDisplay", function(element){
if (!this.subtitleDisplays) {
this.subtitleDisplays = [];
this.onCurrentTimeUpdate(this.subtitleDisplaysOnVideoTimeUpdate);
this.onEnded(function() { this.lastSubtitleIndex = 0; }.context(this))
this.onEnded(function() { this.lastSubtitleIndex = 0; }.context(this));
}
this.subtitleDisplays.push(element);
},{
Expand Down
Loading

0 comments on commit 81aef82

Please sign in to comment.