diff --git a/index.html b/index.html index e3083a79b..8ca4d5df9 100644 --- a/index.html +++ b/index.html @@ -20,14 +20,10 @@ diff --git a/video-js/README.markdown b/video-js/README.markdown index 27df7e23c..f79c939c4 100644 --- a/video-js/README.markdown +++ b/video-js/README.markdown @@ -1,11 +1,120 @@ VideoJS - [HTML5 Video Player](http://videojs.com) ------------------------------------------------- +================================================== View [VideoJS.com](http://videojs.com) for a demo and overview. -VideoJS is an HTML5 video player that uses the HTML5 video tag built into modern browsers, and javascript to add custom controls and functionality. +VideoJS is an HTML5 video player that uses the HTML5 video tag built into modern browsers, and uses javascript to add custom controls, new functionality, and to fix cross browser bugs. The base of VideoJS is Kroc Camen's [Video for Everybody](http://camendesign.com/code/video_for_everybody), which is a video embed code that falls back to a Flash video player or download links for browsers and devices that don't support HTML5 video. View demo.html for an example of how to use it. -Based on the tutorial at http://blog.steveheffernan.com/2010/04/how-to-build-an-html5-video-player/ \ No newline at end of file +Originally based on [this tutorial](http://blog.steveheffernan.com/2010/04/how-to-build-an-html5-video-player/). + +Getting Started +--------------- + +### Step 1: Include VideoJS Javascript and CSS files in your page. +Change the src/href to the appropriate location on your server. + + + + + +### Step 2: Add the VideoJS setup code to your page or another script. +Must run after the VideoJS javascript file has been included + + + + +### Step 3: Add the VideoJS embed code to your page (grab the latest version for demo.html). +Change the video and image files to your own. You can even swap out the Flash Fallback for your own, just maintain the "vjs-flash-fallback" class on the object. I know, seems like a lot of HTML, but it's super compatible. [Check it](http://camendesign.com/code/video_for_everybody/test.html). + + +
+ + + +

Download Video: + MP4, + WebM, + Ogg
+ + HTML5 Video Player by VideoJS +

+
+ + + +Storing a Reference to the Player(s) +------------------------------------ +You can set up the player(s) in a way that allows you to access it later, and control things like the video playback. In this case, the setup has to happen after the DOM has been loaded. You can use any library's DOM Ready method, or the one built into VideoJS. + +### Using a Video's ID or Element + + VideoJS.DOMReady(function(){ + var myPlayer = VideoJS.setup("example_video_1"); + }); + + +### Using an array of video elements/IDs +Note: It returns an array of players + + VideoJS.DOMReady(function(){ + var myManyPlayers = VideoJS.setup(["example_video_1", "example_video_2", video3Element]); + }); + + +### All videos on the page with the "video-js" class + + VideoJS.DOMReady(function(){ + var myManyPlayers = VideoJS.setup("All"); + }); + + +### After you have references to your players you can...(example) + + VideoJS.DOMReady(function(){ + var myPlayer = VideoJS.setup("example_video_1"); + myPlayer.play(); // Starts playing the video for this player. + }); + + +Setting Options +--------------- +Set options when setting up the videos. The defaults are shown here. + + VideoJS.setupAllWhenReady({ + controlsBelow: false, // Display control bar below video instead of in front of + controlsHiding: true, // Hide controls when mouse is not over the video + defaultVolume: 0.85, // Will be overridden by user's last volume if available + flashVersion: 9, // Required flash version for fallback + linksHiding: true // Hide download links when video is supported + }); + +### Or as the second option of VideoJS.setup + + VideoJS.DOMReady(function(){ + var myPlayer = VideoJS.setup("example_video_1", { + // Same options + }); + }); + diff --git a/video-js/demo.html b/video-js/demo.html index 0a93920a3..ceb7c08ca 100644 --- a/video-js/demo.html +++ b/video-js/demo.html @@ -10,30 +10,39 @@ + diff --git a/video-js/video-js.css b/video-js/video-js.css index c91a28c1f..0fa05213c 100644 --- a/video-js/video-js.css +++ b/video-js/video-js.css @@ -14,9 +14,9 @@ video.video-js { background-color: #000; position: relative; } .video-js-box.vjs-fullscreen .vjs-controls { z-index: 1002; } /* Poster Style */ -.vjs-poster { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } +.video-js-box .vjs-poster { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } /* Subtiles Style */ -.vjs-subtitles { color:#fff; font-size: 20px; text-align: center; bottom: 20px; left: 0; right: 0; position: absolute; z-index: 1002; } +.video-js-box .vjs-subtitles { color:#fff; font-size: 20px; text-align: center; bottom: 20px; left: 0; right: 0; position: absolute; z-index: 1002; } /* DEFAULT SKIN (override in another file) diff --git a/video-js/video.js b/video-js/video.js index daf3bfa13..b986d56b7 100644 --- a/video-js/video.js +++ b/video-js/video.js @@ -950,40 +950,65 @@ _V_.bindDOMReady(); // Functions that don't apply to individual videos. //////////////////////////////////////////////////////////////////////////////// -// Add video-js to any video tag with the class on page load -VideoJS.setup = function(options){ +// Add VideoJS to all video tags with the video-js class when the DOM is ready +VideoJS.setupAllWhenReady = function(options){ + // Options is stored globally, and added ot any new player on init VideoJS.options = options; - _V_.addToDOMReady(VideoJS.setupAllWhenReady) -} - -VideoJS.setupAllWhenReady = function(){ - var elements = document.getElementsByTagName("video"); - for (var i=0,j=elements.length; i