Added ability to set parameters via attributes

andchir · Aug 15, 2015 · 1e982c9 · 1e982c9
1 parent f9da470
commit 1e982c9
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -24,19 +24,19 @@
                 logoSize: [ 60, 40 ],
                 markers: [
                     {
-                        time: 39.32,// seconds
+                        time: 39,// seconds
                         text: 'Chapter 1'
                     },
                     {
-                        time: 350.23,
+                        time: 350,
                         text: 'Chapter 2'
                     },
                     {
-                        time: 470.88,
+                        time: 470,
                         text: 'Chapter 3'
                     },
                     {
-                        time: 677.82,
+                        time: 677,
                         text: 'Chapter 4'
                     }
                 ]
@@ -93,19 +93,19 @@ <h3>Player with logo and markers</h3>
             logoSize: [ 60, 40 ],
             markers: [
                 {
-                    time: 39.32,// seconds
+                    time: 39,// seconds
                     text: 'Chapter 1'
                 },
                 {
-                    time: 350.23,
+                    time: 350,
                     text: 'Chapter 2'
                 },
                 {
-                    time: 470.88,
+                    time: 470,
                     text: 'Chapter 3'
                 },
                 {
-                    time: 677.82,
+                    time: 677,
                     text: 'Chapter 4'
                 }
             ]
@@ -117,6 +117,14 @@ <h3>Player with logo and markers</h3>
     &lt;source src="video/Sintel.mp4" type="video/mp4"&gt;
 &lt;/video&gt;</pre>
 
+        <h4>Another way:</h4>
+
+        <pre class="code">&lt;video width="640" height="360" data-logo="img/example_logo.png" data-markers='[{"time":39,"text":"Chapter 1"},{"time":350,"text":"Chapter 2"}]'&gt;
+    &lt;source src="video/Sintel.mp4" type="video/mp4"&gt;
+&lt;/video&gt;</pre>
+
+        <p>Any parameters can be specified by a prefix "data-". The array must be JSON string.</p>
+
         <h3>Play YouTube video</h3>
 
         <video id="video2" width="640" height="360" controls>
@@ -162,6 +170,14 @@ <h3>Play FLV video (basic support)</h3>
     &lt;source src="video/Sintel.flv" type="video/flv"&gt;
 &lt;/video&gt;</pre>
 
+    <h3>API</h3>
+
+    <pre class="code">&lt;script&gt;
+    $('#video1').get(0).play();// Play video
+&lt;/script&gt;</pre>
+
+    <a href="http://www.w3.org/2010/05/video/mediaevents.html" target="_blank">http://www.w3.org/2010/05/video/mediaevents.html</p>
+
     </div>
 </body>
 </html>
diff --git a/js/jquery.video-extend.js b/js/jquery.video-extend.js
@@ -24,7 +24,8 @@
         // Initialize
         base.init = function(){
 
-            base.options = $.extend({}, videoExtend.defaultOptions, options);
+            var attributes = base.getAttributes();
+            base.options = $.extend({}, videoExtend.defaultOptions, options, attributes);
             base.browser = base.getBrowserName();
 
             var video_src = base.$el.attr('src') || base.$el.children('source').attr('src'),
@@ -90,6 +91,19 @@
 
         };
 
+        base.getAttributes = function(){
+            var attributes = {};
+            $.each( base.$el.get(0).attributes, function( index, attr ) {
+                if( attr.name.indexOf('data-') > -1 ) {
+                    var value = attr.value;
+                    if( /\[(.*)\]/.test( value ) )
+                        value = $.parseJSON( value );
+                    attributes[ attr.name.substr(5) ] = value;
+                }
+            });
+            return attributes;
+        };
+
         base.eventsHandler = function(e){
 
             switch( e.type ){