source(), poster() and supports() API methods

changelog.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v1.0.22
+- Added support() API method for checking mimetype support
+- Added source() API method for setting media source(s)
+- Added poster() API method for setting poster source
+- Refactored captions logic for manual captions
+
 ## v1.0.21
 - Added an <input type="range"> for seeking to improve experience (and support dragging)
 - Icons for restart and captions improved (and some IDs changed)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "A simple HTML5 media player using custom controls",
   "homepage": "http://plyr.io",
   "main": "gulpfile.js",

readme.md

@@ -245,50 +245,75 @@ Here's a list of the methods supported:
   </thead>
   <tbody>
   <tr>
-    <td><code>play</code></td>
+    <td><code>play()</code></td>
     <td>&mdash;</td>
     <td>Plays the media</td>
   </tr>
   <tr>
-    <td><code>pause</code></td>
+    <td><code>pause()</code></td>
     <td>&mdash;</td>
     <td>Pauses the media</td>
   </tr>
     <tr>
-    <td><code>restart</code></td>
+    <td><code>restart()</code></td>
     <td>&mdash;</td>
     <td>Restarts playback</td>
   </tr>
   <tr>
-    <td><code>rewind</code></td>
+    <td><code>rewind(...)</code></td>
     <td>Number</td>
     <td>Rewinds by the provided parameter, in seconds. If no parameter is provided, the default seekInterval is used (10 seconds).</td>
   </tr>
   <tr>
-    <td><code>forward</code></td>
+    <td><code>forward(...)</code></td>
     <td>Number</td>
     <td>Fast forwards by the provided parameter, in seconds. If no parameter is provided, the default seekInterval is used (10 seconds).</td>
   </tr>
   <tr>
-    <td><code>seek</code></td>
+    <td><code>seek(...)</code></td>
     <td>Number</td>
     <td>Seeks the media to the provided parameter, time in seconds.</td>
   </tr>
   <tr>
-    <td><code>setVolume</code></td>
+    <td><code>setVolume(...)</code></td>
     <td>Number</td>
     <td>Sets the player volume to the provided parameter. The value should be between 0 (muted) and 10 (loudest). If no parameter is provided, the default volume is used (5). Values over 10 are ignored.</td>
   </tr>
   <tr>
-    <td><code>toggleMute</code></td>
+    <td><code>toggleMute()</code></td>
     <td>&mdash;</td>
     <td>Toggles mute for the player.</td>
   </tr>
   <tr>
-    <td><code>toggleCaptions</code></td>
+    <td><code>toggleCaptions()</code></td>
     <td>&mdash;</td>
     <td>Toggles whether captions are enabled.</td>
   </tr>
+  <tr>
+    <td><code>support(...)</code></td>
+    <td>String</td>
+    <td>Determine if a player supports a certain MIME type.</td>
+  </tr>
+  <tr>
+    <td><code>source(...)</code></td>
+    <td>String, Object or Array</td>
+    <td>
+      Set the media source.
+      <br><br> 
+      <strong>string</strong><br>
+      <em>.source("/path/to/video.mp4")</em><br>
+      This will set the "src" attribute on the `video` or `audio` element.
+      <br><br>
+      <strong>array</strong><br>
+      <em>.source([{ src: "/path/to/video.webm", type: "video/webm", ...more attributes... }, { src: "/path/to/video.mp4", type: "video/mp4", ...more attributes... }])</em><br>
+      This will inject a child `source` element for every element in the array with the specified attributes. `src` is the only required attribute although adding `type` is recommended as it helps the browser decide which file to download and play. 
+    </td>
+  </tr>
+    <tr>
+    <td><code>poster(...)</code></td>
+    <td>String</td>
+    <td>Set the poster url. This is supported for the `video` element only.</td>
+  </tr>
  </tbody>
 </table>
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.0.21
+// plyr.js v1.0.22
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -142,7 +142,7 @@
     }
 
     // Credits: http://paypal.github.io/accessible-html5-video-player/
-    // Unfortunately, due to scattered support, browser sniffing is required
+    // Unfortunately, due to mixed support, UA sniffing is required
     function _browserSniff() {
         var nAgt = navigator.userAgent,
             browserName = navigator.appName,
@@ -469,16 +469,14 @@
             if (player.media.currentTime.toFixed(1) >= _timecodeMin(player.captions[player.subcount][0]) && 
                 player.media.currentTime.toFixed(1) <= _timecodeMax(player.captions[player.subcount][0])) {
                     player.currentCaption = player.captions[player.subcount][1];
-            }
 
-            // Is there a next timecode?
+                // Render the caption
-            if (player.media.currentTime.toFixed(1) > _timecodeMax(player.captions[player.subcount][0]) && 
+                player.captionsContainer.innerHTML = player.currentCaption;
-                player.subcount < (player.captions.length-1)) {
+            }
-                    player.subcount++;
+            else {
+                // Clear the caption
+                player.captionsContainer.innerHTML = "";
             }
-
-            // Render the caption
-            player.captionsContainer.innerHTML = player.currentCaption;
         }
 
         // Display captions container and button (for initialization)
@@ -747,7 +745,6 @@
 
                         // Render captions from array at appropriate time
                         player.currentCaption = "";
-                        player.subcount = 0;
                         player.captions = [];
 
                         if (captionSrc !== "") {
@@ -849,8 +846,8 @@
         }
 
         // Seek to time
-        // The parameter can be an event or a number
+        // The input parameter can be an event or a number
-        var _seek = function(input) {
+        function _seek(input) {
             var targetTime = 0;
 
             // Explicit position
@@ -858,10 +855,10 @@
                 targetTime = input;
             }
             // Event
-            else if (input.type === "change" || input.type === "input") {
+            else if (typeof input === "object" && (input.type === "change" || input.type === "input")) {
                 // It's the seek slider
                 // Seek to the selected time
-                targetTime = ((this.value / this.max) * player.media.duration);
+                targetTime = ((input.target.value / input.target.max) * player.media.duration);
             }
 
             // Normalise targetTime
@@ -879,7 +876,7 @@
             _log("Seeking to " + player.media.currentTime + " seconds");
 
             // Special handling for "manual" captions
-            _seekManualCaptions(0);
+            _seekManualCaptions(targetTime);
         }
 
         // Check playing state
@@ -1085,57 +1082,20 @@
 
         // Inject a source
         function _addSource(attributes) {
-            // Create a new <source>
+            if(attributes.src) {
-            var element = document.createElement("source");
+                // Create a new <source>
+                var element = document.createElement("source");
 
-            // Set all passed attributes
+                // Set all passed attributes
-            _setAttributes(element, attributes);
+                _setAttributes(element, attributes);
 
-            // Inject the new source
+                // Inject the new source
-            _prependChild(player.media, element);
+                _prependChild(player.media, element);
-        }
-
-        // Set source
-        function _setSource(source) {
-            if(source.type && source.src) {
-                _addSource(source);
             }
-
-            /*if(source.type && source.src) {
-                // Check if it's supported first
-                if(_support(player, source.type)) {
-                    // Pause playback (webkit freaks out)
-                    _pause();
-
-                    // Update the UI
-                    _checkPlaying();
-
-                    // Remove current sources
-                    _removeSources();
-
-                    // Set the src attribute
-                    player.media.setAttribute("src", source.src);
-
-                    // Restart
-                    _seek();
-
-                    // Reset time display
-                    _timeUpdate();
-
-                    // Play if autoplay attribute is present
-                    if(player.media.getAttribute("autoplay") !== null) {
-                        _play();
-                    }
-                }
-                else {
-                    _log("No support for: " + source.src + " [" + source.type + "]");
-                }
-            }*/
-
-
         }
 
         // Update source
+        // Sources are not checked for support so be careful
         function _parseSource(sources) {
             // Pause playback (webkit freaks out)
             _pause();
@@ -1149,25 +1109,20 @@
             // Remove current sources
             _removeSources();
 
-
+            // If a single source is passed
-
+            // .source("path/to/video.mp4")
-            // If a single source object is provided
+            if(typeof sources === "string") {
-            // ({ src: "//cdn.selz.com/plyr/1.0/movie.webm", type: "video/webm" })
+                player.media.setAttribute("src", sources);
-            if(typeof sources === "object" && sources.constructor !== Array) {
-                // Set src attribute on the element
-                _setSource(sources);
             }
 
             // An array of source objects
             // Check if a source exists, use that or set the "src" attribute?
-            // ([{ src: "path/to/src.mp4", type: "video/mp4" },{ src: "path/to/src.webm", type: "video/webm" }])
+            // .source([{ src: "path/to/video.mp4", type: "video/mp4" },{ src: "path/to/video.webm", type: "video/webm" }])
             else if (sources.constructor === Array) {
                 for (var index in sources) { 
-                    _setSource(sources[index]);
+                    _addSource(sources[index]);
                 }
             }
-            
-
 
             // Reset time display
             _timeUpdate();
@@ -1343,7 +1298,7 @@
             toggleCaptions:     _toggleCaptions,
             source:             _parseSource,
             poster:             _updatePoster,
-            support:            _support
+            support:            function(mimeType) { return _support(player, mimeType); }
         }
     }