video.js/sandbox/plugin.html.example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Video.js Plugin Example</title>

  <!-- Load the source files -->
  <link href="../dist/video-js.css" rel="stylesheet" type="text/css">
  <script src="../dist/video.js"></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" controls preload="auto" width="640" height="264" poster="https://vjs.zencdn.net/v/oceans.png">
    <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm">
    <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
    <p>Video Playback Not Supported</p>
  </video>

  <script>
    (function() {
      var vid1, 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
      videojs.plugin('progressed', progressed);

      // initialize it
      vid1 = videojs('vid1');
      vid1.progressed();
    })();
  </script>

</body>
</html>
Plugin Doc and Example 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. 2013-02-09 01:20:59 +03:00			`<!DOCTYPE html>`
@OwenEdwards added language attribute in HTML files for accessibility. closes #3257 2016-04-29 00:29:40 +02:00			`<html lang="en">`
Plugin Doc and Example 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. 2013-02-09 01:20:59 +03:00			`<head>`
			`<meta charset="utf-8" />`
Remove Extra Flash Switch Get rid of the extra switching logic to force Flash tech. Worth noting: it has to exist as a separate script tag because we're using document.write to insert video.js scripts. 2013-02-11 17:49:30 +03:00			`<title>Video.js Plugin Example</title>`
Plugin Doc and Example 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. 2013-02-09 01:20:59 +03:00
Updated build and sample files with IE8 shims --skip-ci 2015-06-06 03:10:39 +02:00			`<!-- Load the source files -->`
chore: generate a test example on netlify for PRs (#4912) 2018-01-30 18:17:41 +02:00			`<link href="../dist/video-js.css" rel="stylesheet" type="text/css">`
chore(sandbox): Fix paths in sandbox files. (#4416) 2017-06-27 01:51:05 +02:00			`<script src="../dist/video.js"></script>`
Plugin Doc and Example 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. 2013-02-09 01:20:59 +03:00
			`</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>`

chore(sandbox): switch all urls to https (#6946) 2020-11-16 22:13:27 +02:00			`<video id="vid1" class="video-js" controls preload="auto" width="640" height="264" poster="https://vjs.zencdn.net/v/oceans.png">`
			`<source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">`
			`<source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm">`
			`<source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">`
Plugin Doc and Example 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. 2013-02-09 01:20:59 +03:00			`<p>Video Playback Not Supported</p>`
			`</video>`

			`<script>`
			`(function() {`
Remove Up-Front Config Example Get rid of the example code for configuring a plugin at creation time. There's already an example in the tutorial and it makes things a bit confusing. 2013-02-11 21:05:39 +03:00			`var vid1, progressed;`
Plugin Doc and Example 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. 2013-02-09 01:20:59 +03:00
			`// 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`
@kahwee Fixed sandbox plugin example to work in Video.js 5. closes #2691 2015-10-28 22:06:33 +02:00			`videojs.plugin('progressed', progressed);`
Plugin Doc and Example 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. 2013-02-09 01:20:59 +03:00
			`// initialize it`
@kahwee Fixed sandbox plugin example to work in Video.js 5. closes #2691 2015-10-28 22:06:33 +02:00			`vid1 = videojs('vid1');`
Up-Front Plugin Config Create an example of making a dynamic video element and loading a plugin. Add that example to the tutorial. 2013-02-11 18:16:08 +03:00			`vid1.progressed();`
Plugin Doc and Example 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. 2013-02-09 01:20:59 +03:00			`})();`
			`</script>`

			`</body>`
			`</html>`