Permalink
Browse files

Updated api and setup docs

  • Loading branch information...
1 parent 9678c77 commit 7ef5b15ae27f4aa9077e037e9f2a12b73a1a08b4 Steve Heffernan committed Jan 6, 2012
@@ -1,2 +0,0 @@
-Tagging a Release
-git tag -a v[version number] [commit]
@@ -0,0 +1,24 @@
+Version Numbers
+---------------
+http://en.wikipedia.org/wiki/Software_versioning#Sequence-based_identifiers
+
+### Major Version (Integer, e.g 3.0)
+- Any features where we expect it could break plugins, skins, or any major API integration.
+
+### Minor Version (3.1)
+- Additional non-breaking features
+
+### Revision Versions
+
+- Beta (3.1-b1)
+- Release Candidate (3.1-rc1)
+- Release with revisions (3.1-r1)
+
+Notes:
+The last level of one revision type (beta/release candidate) should match the first level of the next revision type. 4.0-b10 should match 4.0-rc1, assuming b10 is the last beta version.
+
+Release revisions means bug fixes. The CDN url should not reflect the revision number. 4.0-r2 would still be /4.0/.
+
+Tagging a Release
+-----------------
+git tag -a v[version number] [commit]
View
@@ -1,4 +1,5 @@
_V_.options.flash.swf = "../flash/video-js.swf";
+_V_.options.flash.swf = "http://andylemay.com/dev/videojs/VideoJS.swf";
$(function(){
var tech, i, tname, player,
View
Oops, something went wrong.
View
Deleted file not rendered
View
@@ -19,7 +19,7 @@ REQUIRED STYLES (be careful overriding)
/* Allow poster to be vertially aligned. */
vertical-align: middle;
- display: table-cell;
+ /* display: table-cell; */ /*This works in Safari but not Firefox.*/
}
/* Playback technology elements expand to the width/height of the containing div. <video> or <object> */
@@ -0,0 +1,17 @@
+#! /usr/bin/env ruby
+# Create javascript file with list of source files for easy inclusion in other development files.
+
+# puts ARGV[0]
+
+File.open("source-list.js", "w+") do |file|
+ file.puts "var vjsSourceList = [];"
+
+
+ Dir.foreach('../src') do |item|
+ next if item == '.' or item == '..' or item == '.DS_Store'
+
+ file.puts "vjsSourceList.push('src/#{item}')"
+
+ end
+
+end
No changes.
View
@@ -0,0 +1,13 @@
+var vjsSourceList = [];
+vjsSourceList.push('_begin.js')
+vjsSourceList.push('_end.js')
+vjsSourceList.push('component.js')
+vjsSourceList.push('controls.js')
+vjsSourceList.push('core.js')
+vjsSourceList.push('ecma.js')
+vjsSourceList.push('events.js')
+vjsSourceList.push('json.js')
+vjsSourceList.push('lib.js')
+vjsSourceList.push('player.js')
+vjsSourceList.push('tech.js')
+vjsSourceList.push('tracks.js')
View
@@ -1,28 +1,30 @@
---
layout: docs
-title: API
-description: Video.JS API Docs
-body_id: docs
+title: API &mdash; Video.JS &raquo; HTML5 Video Player
+description: Video.JS API Docs - API settings based on the HTML5 video API
+body_id: api
+body_class: docs subpage
---
API
===
-The VideoJS API allows you to interact with the video through Javascript, whether the browser is playing the video through HTML5 video or any other supported playback technologies.
+The Video.js API allows you to interact with the video through Javascript, whether the browser is playing the video through HTML5 video, Flash, or any other supported playback technologies.
Referencing the Player
----------------------
-To use the API functions, you need access to the player object. Luckily this is easy to get. You just need to make sure your video tag has an ID. The example embed code has an ID of "example_video_1". If you have multiple videos on one page, make sure every video tag has a unique ID (example_video_2, example_video_3, etc.).
+To use the API functions, you need access to the player object. Luckily this is easy to get. You just need to make sure your video tag has an ID. The example embed code has an ID of "example_video_1". If you have multiple videos on one page, make sure every video tag has a unique ID.
{% highlight javascript %}
var myPlayer = _V_("example_video_1");
{% endhighlight %}
+(If the player hasn't been initialized yet via the data-setup attribute or another method, this will also initialize the player.)
Wait Until the Player is Ready
------------------------------
-The time it takes VideoJS to set up the video and API will vary depending on the playback technology being used (HTML5 will often be much faster to load than Flash). For that reason we want to use the player's 'ready' function to trigger any code that requires the player's API.
+The time it takes Video.js to set up the video and API will vary depending on the playback technology being used (HTML5 will often be much faster to load than Flash). For that reason we want to use the player's 'ready' function to trigger any code that requires the player's API.
{% highlight javascript %}
@@ -39,122 +41,189 @@ The time it takes VideoJS to set up the video and API will vary depending on the
API Methods
-----------
-Now that you have access to a ready player, you can control the video or react to video events using the following functions. The VideoJS API function names follow the HTML5 media API. The main difference is that attributes which you would get or set on a video element directly ( videoElement.currentTime = "120"; ), you would use a function argument syntax for VideoJS ( myPlayer.currentTime(120); )
+Now that you have access to a ready player, you can control the video or respond to video events using the following functions. The Video.js API function names follow the [HTML5 media API](http://www.w3.org/TR/html5/video.html). The main difference is that attributes which you would get or set on a video element using the equals sign ( `myVideoElement.currentTime = "120";` ), you would use a function argument syntax for Video.js ( `myPlayer.currentTime(120);` )
### play()
- Start video playback.
- Returns the player object.
- Example:
+ Start video playback. Returns the player object.
+
+{% highlight javascript %}
+
+ myPlayer.play();
+
+{% endhighlight %}
+
- myPlayer.play();
### pause()
- Pause the video playback.
- Returns: the player object
- Example:
+ Pause the video playback. Returns: the player object
+
+{% highlight javascript %}
- myPlayer.pause();
+ myPlayer.pause();
+
+{% endhighlight %}
### currentTime()
Returns the current time of the video in seconds.
- Example:
- var whereYouAt = myPlayer.currentTime();
+{% highlight javascript %}
+
+ var whereYouAt = myPlayer.currentTime();
+
+{% endhighlight %}
### currentTime(seconds) // Type: Integer or Float
Seek to the supplied time (seconds).
Returns the player object.
- Example:
- myPlayer.currentTime(120); // 2 minutes into the video
+{% highlight javascript %}
+
+ myPlayer.currentTime(120); // 2 minutes into the video
+
+{% endhighlight %}
### duration()
Returns the length in time of the video in seconds. NOTE: The video must have started loading before the duration can be known, and in the case of Flash, may not be known until the video starts playing.
- Example:
- var howLongIsThis = myPlayer.duration();
+
+{% highlight javascript %}
+
+ var howLongIsThis = myPlayer.duration();
+
+{% endhighlight %}
### buffered()
Returns a [TimeRange](http://videojs.com/docs/glossary.html#timerange) with sections of the video that have been downloaded. If you just want the percent of the video that's been downloaded, use bufferedPercent.
- Example:
- var whatHasBeenBuffered = myPlayer.buffered();
+{% highlight javascript %}
+
+ var whatHasBeenBuffered = myPlayer.buffered();
+
+{% endhighlight %}
### bufferedPercent()
Returns the percent (as a decimal) of the video that's been downloaded.
- Example:
- var howMuchIsDownloaded = myPlayer.bufferedPercent();
+{% highlight javascript %}
+
+ var howMuchIsDownloaded = myPlayer.bufferedPercent();
+
+{% endhighlight %}
### volume()
Returns the current volume of the video as a percent in decimal form. 0 is off (muted), 1.0 is all the way up, 0.5 is half way.
- Example:
- var howLoudIsIt = myPlayer.volume();
+{% highlight javascript %}
+
+ var howLoudIsIt = myPlayer.volume();
+
+{% endhighlight %}
### volume(percentAsDecimal)
Set the volume to the supplied percent (as a decimal between 0 and 1).
- Example:
- myPlayer.volume(0.5); // Set volume to half
+{% highlight javascript %}
+
+ myPlayer.volume(0.5); // Set volume to half
+
+{% endhighlight %}
### width()
Returns the current width of the video in pixels.
- Example:
-
+
+{% highlight javascript %}
+
var howWideIsIt = myPlayer.width();
+{% endhighlight %}
+
### width(pixels)
Change the width of the video to the supplied width in pixels.
Returns the player object
- Example:
- myPlayer.width(640);
+{% highlight javascript %}
+
+ myPlayer.width(640);
+
+{% endhighlight %}
+
### height()
Returns the current height of the video in pixels.
- Example:
- var howTallIsIt = myPlayer.height();
+{% highlight javascript %}
+
+ var howTallIsIt = myPlayer.height();
+
+{% endhighlight %}
+
### height(pixels)
Change the height of the video to the supplied height in pixels.
Returns the player object
- myPlayer.height(480);
+{% highlight javascript %}
+
+ myPlayer.height(480);
+
+{% endhighlight %}
+
### size(width, height)
- Changes the width and height of the video to the supplied width and height. This is more efficient if you're changing both width and height.
- Returns the player object.
-
- myPlayer.size(640,480);
+ Changes the width and height of the video to the supplied width and height. This is more efficient if you're changing both width and height (only triggers the player's resize event once). Returns the player object.
+
+{% highlight javascript %}
-### enterFullScreen()
- Increase the size of the video to full screen. In some browsers, full screen is not supported natively, so it enters full window mode, where the fills the browser window. In browsers that support native full screen, typically the browser's default controls will be shown, and not the VideoJS custom skin. In full window mode, the VideoJS controls and skin will always be used.
+ myPlayer.size(640,480);
+
+{% endhighlight %}
+
+
+### requestFullScreen()
+ Increase the size of the video to full screen. In some browsers, full screen is not supported natively, so it enters full window mode, where the fills the browser window. In browsers that support native full screen, typically the browser's default controls will be shown, and not the Video.js custom skin. In full window mode, the Video.js controls and skin will always be used.
Returns the player object.
- myPlayer.enterFullScreen();
+{% highlight javascript %}
+
+ myPlayer.enterFullScreen();
+
+{% endhighlight %}
-### exitFullScreen()
+
+### cancelFullScreen()
Return the video to its normal size after having been in full screen mode.
Returns the player object.
- myPlayer.exitFullScreen();
+{% highlight javascript %}
+
+ myPlayer.exitFullScreen();
+
+{% endhighlight %}
Events
------
You can attach event listeners to the player similarly to how you would for a video element.
- var myFunc = function(){
- // Do something when the event is fired
- };
- myPlayer.addEvent("eventName", myFunc);
+{% highlight javascript %}
+
+ var myFunc = function(){
+ // Do something when the event is fired
+ };
+ myPlayer.addEvent("eventName", myFunc);
+
+{% endhighlight %}
+
You can also remove the listeners later.
- myPlayer.removeEvent("eventName", myFunc);
+{% highlight javascript %}
+
+ myPlayer.removeEvent("eventName", myFunc);
+
+{% endhighlight %}
+
### Event Types
Oops, something went wrong.

0 comments on commit 7ef5b15

Please sign in to comment.