mirror of
https://github.com/videojs/video.js.git
synced 2024-11-24 08:42:25 +02:00
Changed setup to include setupAllWhenReady as the main easy way to set up.
Switched setup() to return one or an array of players for referencing later. Added a bunch to the ReadMe file.
This commit is contained in:
Steve Heffernan
parent
3e8f2db575
commit
795f2f8a1d
115
README.markdown
115
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/
|
||||
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.
|
||||
|
||||
<script src="video.js" type="text/javascript" charset="utf-8"></script>
|
||||
<link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
|
||||
|
||||
|
||||
### Step 2: Add the VideoJS setup code to your page or another script.
|
||||
Must run after the VideoJS javascript file has been included
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
|
||||
// Add VideoJS to all video tags on the page when the DOM is ready
|
||||
VideoJS.setupAllWhenReady();
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
### 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).
|
||||
|
||||
<!-- Begin VideoJS -->
|
||||
<div class="video-js-box">
|
||||
<!-- 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" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>
|
||||
<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.ogg" type='video/ogg; codecs="theora, vorbis"'>
|
||||
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
|
||||
<object class="vjs-flash-fallback" 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={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
|
||||
<!-- Image Fallback. Typically the same as the poster image. -->
|
||||
<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
|
||||
title="No video playback capabilities." />
|
||||
</object>
|
||||
</video>
|
||||
<!-- Download links provided for devices that can't play video in the browser. -->
|
||||
<p class="vjs-no-video"><strong>Download Video:</strong>
|
||||
<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
|
||||
<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
|
||||
<a href="http://video-js.zencoder.com/oceans-clip.ogg">Ogg</a><br>
|
||||
<!-- Support VideoJS by keeping this link. -->
|
||||
<a href="http://videojs.com">HTML5 Video Player</a> by <a href="http://videojs.com">VideoJS</a>
|
||||
</p>
|
||||
</div>
|
||||
<!-- End 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
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
45
demo.html
45
demo.html
@ -10,30 +10,39 @@
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
// Must come after the video.js library
|
||||
|
||||
// Add VideoJS to all video tags on the page
|
||||
VideoJS.setup();
|
||||
// Add VideoJS to all video tags on the page when the DOM is ready
|
||||
VideoJS.setupAllWhenReady();
|
||||
|
||||
/* ========== OR ========== */
|
||||
/* ============= OR ============ */
|
||||
|
||||
// Setup and store a reference to a video.
|
||||
// Setup and store a reference to the player(s).
|
||||
// Must happen after the DOM is loaded
|
||||
// You can use any library's DOM Ready method instead of VideoJS.DOMReady
|
||||
|
||||
/*
|
||||
VideoJS.DOMReady(function(){
|
||||
var myPlayer = new VideoJS("example_video_1");
|
||||
|
||||
// Using the video's ID or element
|
||||
var myPlayer = VideoJS.setup("example_video_1");
|
||||
|
||||
// OR using an array of video elements/IDs
|
||||
// Note: It returns an array of players
|
||||
var myManyPlayers = VideoJS.setup(["example_video_1", "example_video_2", video3Element]);
|
||||
|
||||
// Then you can...(example)
|
||||
myPlayer.play();
|
||||
// OR all videos on the page
|
||||
var myManyPlayers = VideoJS.setup("All");
|
||||
|
||||
// After you have references to your players you can...(example)
|
||||
myPlayer.play(); // Starts playing the video for this player.
|
||||
});
|
||||
*/
|
||||
// If you are already using a DOM Loaded function from another lib (jQuery, Prototype, etc.)
|
||||
// you can use that instead of VideoJS.DOMReady
|
||||
|
||||
/* ========== OR ========== */
|
||||
/* ========= SETTING OPTIONS ========= */
|
||||
|
||||
// Set options when setting up the videos. The defaults are shown here.
|
||||
|
||||
// Set options when setting up the videos
|
||||
// The defaults are shown here
|
||||
/*
|
||||
VideoJS.setup({
|
||||
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
|
||||
@ -42,6 +51,16 @@
|
||||
});
|
||||
*/
|
||||
|
||||
// Or as the second option of VideoJS.setup
|
||||
|
||||
/*
|
||||
VideoJS.DOMReady(function(){
|
||||
var myPlayer = VideoJS.setup("example_video_1", {
|
||||
// Same options
|
||||
});
|
||||
});
|
||||
*/
|
||||
|
||||
</script>
|
||||
<!-- Include the VideoJS Stylesheet -->
|
||||
<link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
|
||||
|
||||
69
video.js
69
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<j; i++) {
|
||||
videoTag = elements[i];
|
||||
if (videoTag.className.indexOf("video-js") != -1) {
|
||||
videoJSPlayers[i] = new VideoJS(videoTag, { num: i });
|
||||
}
|
||||
}
|
||||
VideoJS.DOMReady(VideoJS.setup);
|
||||
}
|
||||
|
||||
// Run the supplied function when the DOM is ready
|
||||
VideoJS.DOMReady = function(fn){
|
||||
_V_.addToDOMReady(fn);
|
||||
}
|
||||
|
||||
// Add video-js to the video tag or array of video tags (or IDs) passed in.
|
||||
// Typically used when videos are being added to a page dynamically.
|
||||
VideoJS.addVideos = function(videos, options) {
|
||||
videos = videos instanceof Array ? videos : [videos];
|
||||
var videoTag;
|
||||
// Set up a specific video or array of video elements
|
||||
// "video" can be:
|
||||
// false, undefined, or "All": set up all videos with the video-js class
|
||||
// A video tag ID or video tag element: set up one video and return one player
|
||||
// An array of video tag elements/IDs: set up each and return an array of players
|
||||
VideoJS.setup = function(videos, options){
|
||||
|
||||
var returnSingular = false,
|
||||
playerList = [];
|
||||
|
||||
// If videos is undefined or "All", set up all videos with the video-js class
|
||||
if (!videos || videos == "All") {
|
||||
videos = VideoJS.getVideoJSTags();
|
||||
|
||||
// If videos is not an array, add to an array
|
||||
} else if (typeof videos != 'object') {
|
||||
videos = [videos];
|
||||
returnSingular = true;
|
||||
}
|
||||
|
||||
// Loop through videos and create players for them
|
||||
for (var i=0; i<videos.length; i++) {
|
||||
if (typeof videos[i] == 'string') {
|
||||
videoTag = document.getElementById(videos[i]);
|
||||
videoElement = document.getElementById(videos[i]);
|
||||
} else { // assume DOM object
|
||||
videoTag = videos[i];
|
||||
videoElement = videos[i];
|
||||
}
|
||||
options = (options) ? _V_.merge(options, { num: videoJSPlayers.length }) : options;
|
||||
videoJSPlayers.push(new VideoJS(videoTag, options));
|
||||
playerList.push(new VideoJS(videoElement, options));
|
||||
}
|
||||
|
||||
// Return one or all depending on what was passed in
|
||||
return (returnSingular) ? playerList[0] : playerList;
|
||||
}
|
||||
|
||||
// Find video tags with the video-js class
|
||||
VideoJS.getVideoJSTags = function() {
|
||||
var videoTags = document.getElementsByTagName("video"),
|
||||
videoJSTags = [];
|
||||
|
||||
for (var i=0,j=videoTags.length; i<j; i++) {
|
||||
videoTag = videoTags[i];
|
||||
if (videoTag.className.indexOf("video-js") != -1) {
|
||||
videoJSTags.push(videoTag);
|
||||
}
|
||||
}
|
||||
|
||||
return videoJSTags;
|
||||
}
|
||||
|
||||
// Check if the browser supports video.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user