Up-Front Plugin Config

Create an example of making a dynamic video element and loading a plugin. Add that example to the tutorial.

docs/plugins.md

@@ -26,6 +26,13 @@ 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:
 
+    vjs('vidId', {
+      plugins: {
+        examplePlugin: {
+          exampleOption: true
+        }
+      }
+    });
 
 If you've already initialized your video tag, you can activate a plugin at any time by calling its setup function directly:
 

sandbox/plugin.html.example

@@ -50,7 +50,7 @@
 
   <script>
     (function() {
-      var video, progressed;
+      var vid1, vidtag, vid2, progressed;
 
       // create a really simple plugin
       // this one just logs the buffered percentage to the console whenever
@@ -65,8 +65,21 @@
       vjs.plugin('progressed', progressed);
 
       // initialize it
-      video = vjs('vid1');
-      video.progressed();
+      vid1 = vjs('vid1');
+      vid1.progressed();
+
+      // create a new video and simultaneously initialize a plugin
+      vidtag = document.createElement('video');
+      vidtag.src = 'http://video-js.zencoder.com/oceans-clip.mp4';
+      vidtag.setAttribute('controls');
+      vidtag.setAttribute('class','video-js vjs-default-skin');
+      vidtag.id = 'vid2';
+      document.body.appendChild(vidtag);
+      vid2 = vjs('vid2', {
+        plugins: {
+          progressed: {}
+        }
+      });
     })();
   </script>