mirror of
https://github.com/videojs/video.js.git
synced 2024-12-23 02:04:34 +02:00
f87297b20e
People keep finding the v4 legacy docs at docs.videojs.com/docs and Google keeps positioning them highly in search results. This attempts to lessen that.
61 lines
4.4 KiB
HTML
61 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title></title>
|
|
<link rel="stylesheet" type="text/css" href="../css/guides.css">
|
|
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic,600,600italic' rel='stylesheet' type='text/css'><link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/styles/solarized_light.min.css" />
|
|
<script type="text/javascript" src="//use.edgefonts.net/source-code-pro.js"></script>
|
|
<link rel="canonical" href="https://docs.videojs.com/tutorial-plugins.html">
|
|
</head>
|
|
<body>
|
|
<p class="legacydocsnote">This documentation is for an outdated version of Video.js. See <a href="https://docs.videojs.com/tutorial-plugins.html">documentation for the current release</a>.
|
|
|
|
<div id="sidenav" class="sidenav"></div>
|
|
<div id="main" class="main">
|
|
<h1 id="plugins">Plugins</h1>
|
|
<p>If you've built something cool with Video.js, you can easily share it with the rest of the world by creating a plugin. Although, you can roll your own, you can also use <a href="https://github.com/dmlap/generator-videojs-plugin">generator-videojs-plugin</a>, a <a href="http://yeoman.io">Yeoman</a> generator that provides scaffolding for video.js plugins including:</p>
|
|
<ul>
|
|
<li><a href="http://gruntjs.com">Grunt</a> for build management</li>
|
|
<li><a href="https://www.npmjs.org">npm</a> for dependency management</li>
|
|
<li><a href="http://qunitjs.com">QUnit</a> for testing</li>
|
|
</ul>
|
|
<h2 id="step-1-write-some-javascript">Step 1: Write Some Javascript</h2>
|
|
<p>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:</p>
|
|
<pre><code class="lang-js"> function examplePlugin(options) {
|
|
this.on('play', function(e) {
|
|
console.log('playback has started!');
|
|
});
|
|
};
|
|
</code></pre>
|
|
<p>When it's activated, <code>this</code> will be the Video.js player your plugin is attached to. You can use anything you'd like in the <a href="./api.html">Video.js API</a> when you're writing a plugin: change the <code>src</code>, mess up the DOM, or listen for and emit your own events.</p>
|
|
<h2 id="step-2-registering-a-plugin">Step 2: Registering A Plugin</h2>
|
|
<p>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:</p>
|
|
<pre><code class="lang-js"> videojs.plugin('examplePlugin', examplePlugin);
|
|
</code></pre>
|
|
<p>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...</p>
|
|
<h2 id="step-3-using-a-plugin">Step 3: Using A Plugin</h2>
|
|
<p>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:</p>
|
|
<pre><code class="lang-js"> videojs('vidId', {
|
|
plugins: {
|
|
examplePlugin: {
|
|
exampleOption: true
|
|
}
|
|
}
|
|
});
|
|
</code></pre>
|
|
<p>If you've already initialized your video tag, you can activate a plugin at any time by calling its setup function directly:</p>
|
|
<pre><code class="lang-js"> var video = videojs('cool-vid');
|
|
video.examplePlugin({ exampleOption: true });
|
|
</code></pre>
|
|
<p>That's it. Head on over to the <a href="https://github.com/videojs/video.js/wiki/Plugins">Video.js wiki</a> and add your plugin to the list so everyone else can check it out.</p>
|
|
<h2 id="how-should-i-use-the-video-js-icons-in-my-plugin-">How should I use the Video.js icons in my plugin?</h2>
|
|
<p>If you'd like to use any of the icons available in the <a href="http://videojs.github.io/font/">Video.js icon set</a>, please target them via the CSS class names instead of codepoints. The codepoints <em>may</em> change between versions of the font, so using the class names ensures that your plugin will stay up to date with any font changes.</p>
|
|
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/highlight.min.js"></script>
|
|
<script src="../js/guides.js"></script>
|
|
<script>hljs.initHighlightingOnLoad();</script>
|
|
</body>
|
|
|
|
</html>
|