1 files changed, 45 insertions, 0 deletions
diff --git a/javascript/videojs/sandbox/plugin.html.example b/javascript/videojs/sandbox/plugin.html.example
new file mode 100644
index 0000000..2f4c154
--- /dev/null
+++ b/javascript/videojs/sandbox/plugin.html.example
@@ -0,0 +1,45 @@
+<!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>