web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-11-28 08:58:46 +02:00
Code Releases Activity

Plugin Doc and Example

Browse Source 
Added most of a doc on building plugins. Still missing a section on up-front plugins. Created an example page that shows how to load a plugin.
This commit is contained in:
David LaPalomento 2013-02-08 17:20:59 -05:00
parent 0206ba9469
commit 1579e623b0
3 changed files with 119 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/index.md
View File

@ -20,6 +20,8 @@ The Video.js documentation is here to help you setup and use the player. These d
* [Tech](tech.md) - A 'playback technology' is the term we're using to represent HTML5 video, Flash, and other video plugins, as well as other players like the YouTube player. Basically anything that has a unique API to audio or video. Additional playback technologies can be added relatively easily.
* [Plugins](plugins.md) - You can package up interesting Video.js customizations and reuse them elsewhere. Find out how to build your own plugin or use one created by someone else.
## Resources
* [Glossary](glossary.md) - Some helpful definitions.

34
docs/plugins.md Normal file
View File

@ -0,0 +1,34 @@
Plugins
=======
If you've built something cool with Video.js, you can easily share it with the rest of the world by creating a plugin.
Step 1: Write Some Javascript
-----------------------------
You may have already done this step. Code up something interesting and then wrap it in a function. At the most basic level, that's all a video.js plugin is. By convention, plugins take a hash of options as their first argument:
function examplePlugin(options) {
this.on('play', function(e) {
console.log('playback has started!');
});
};
When it's activated, `this` will be the Video.js player your plugin is attached to. You can use anything you'd like in the [Video.js API](api.md) when you're writing a plugin: change the `src`, mess up the DOM, or listen for and emit your own events.
Step 2: Registering A Plugin
-------------------------------
It's time to give the rest of the world the opportunity to be awed by your genius. When your plugin is loaded, it needs to let Video.js know this amazing new functionality is now available:
vjs.plugin('examplePlugin', examplePlugin);
From this point on, your plugin will be added to the Video.js prototype and will show up as a property on every instance created. Make sure you choose a unique name that doesn't clash with any of the properties already in Video.js. Which leads us to...
Step 3: Using A Plugin
----------------------
There are two ways to initialize a plugin. If you're creating your video tag dynamically, you can specify the plugins you'd like to initialize with it and any options you want to pass to them:
If you've already initialized your video tag, you can activate a plugin at any time by calling its setup function directly:
video.examplePlugin({ exampleOption: true });
That's it. Head on over to the Video.js wiki and add your plugin to the list so everyone else can check it out.

83
sandbox/plugin.html.example Normal file
View File

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Video.js Sandbox</title>
<link href="../src/css/video-js.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<script src="https://getfirebug.com/releases/lite/1.4/firebug-lite.js"></script>
<!--<![endif]-->
<!-- GENERATED LIST OF SOURCE FILES -->
<script src="../build/files/sourcelist.js"></script>
<script>
(function(){
// Load source list generated by build script
if (!sourcelist) {
console.log('run `grunt` to generate source list');
} else {
var root = '../';
for (var i = 0; i < sourcelist.length; i++) {
document.write( "<script src='" + root + sourcelist[i] + "'><\/script>" );
}
}
// Easy access to test Flash over HTML5. Add ?flash to URL
if (window.location.href.indexOf("?flash") !== -1) {
videojs.options.techOrder = ["Flash"];
videojs.options.flash.swf = "../src/swf/video-js.swf";
}
})()
</script>
<script type="text/javascript" charset="utf-8">
// Easy access to test Flash over HTML5. Add ?flash to URL
if (window.location.href.indexOf("?flash") !== -1) {
videojs.options.techOrder = ["flash"];
videojs.options.flash.swf = "../src/swf/video-js.swf";
}
</script>
</head>
<body>
<p style="background-color:#eee; border: 1px solid #777; padding: 10px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">This page shows you how to create, register and initialize a Video.js plugin.</p>
<video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'>
<p>Video Playback Not Supported</p>
</video>
<script>
(function() {
var video, progressed;
// create a really simple plugin
// this one just logs the buffered percentage to the console whenever
// more data is downloaded
progressed = function(options) {
this.on('progress', function(e) {
console.log(this.bufferedPercent());
});
};
// register the plugin
vjs.plugin('progressed', progressed);
// initialize it
video = vjs('vid1');
video.progressed();
})();
</script>
</body>
</html>