Manually merged #385

src/js/plyr.js

@@ -124,7 +124,8 @@
             tabFocus:           'tab-focus'
         },
         captions: {
-            defaultActive:      false
+            defaultActive:      false,
+            selectedIndex:      0
         },
         fullscreen: {
             enabled:            true,
@@ -437,13 +438,20 @@
         }
     }
 
-    // Bind event
+    // Bind event handler
     function _on(element, events, callback, useCapture) {
-        if (element) {
+        if (_is.htmlElement(element)) {
             _toggleListener(element, events, callback, true, useCapture);
         }
     }
 
+    // Unbind event handler
+    function _off(element, events, callback, useCapture) {
+        if (_is.htmlElement(element)) {
+            _toggleListener(element, events, callback, false, useCapture);
+        }
+    }
+
     // Trigger event
     function _event(element, type, bubbles, properties) {
         // Bail if no element
@@ -1017,6 +1025,25 @@
             }
         }
 
+        // Caption cue change helper event
+        /*function _captionCueChange() {
+            _setActiveCueForTrack(this);
+        }*/
+
+        // Display active caption if it contains text
+        function _setActiveCueForTrack(track) {
+            if (_is.event(track)) {
+                track = track.target;
+            }
+
+            // Display a cue, if there is one
+            if (track.activeCues[0] && 'text' in track.activeCues[0]) {
+                _setCaption(track.activeCues[0].getCueAsHTML());
+            } else {
+                _setCaption();
+            }
+        }
+
         // Setup captions
         function _setupCaptions() {
             // Bail if not HTML5 video
@@ -1036,7 +1063,8 @@
             }
 
             // Get URL of caption file if exists
-            var captionSrc = '',
+            var captionSources = [],
+                captionSrc = '',
                 kind,
                 children = plyr.media.childNodes;
 
@@ -1044,17 +1072,21 @@
                 if (children[i].nodeName.toLowerCase() === 'track') {
                     kind = children[i].kind;
                     if (kind === 'captions' || kind === 'subtitles') {
-                        captionSrc = children[i].getAttribute('src');
+                        captionSources.push(children[i].getAttribute('src'));
                     }
                 }
             }
 
             // Record if caption file exists or not
             plyr.captionExists = true;
-            if (captionSrc === '') {
+            if (captionSources.length === 0) {
                 plyr.captionExists = false;
                 _log('No caption track found');
+            } else if ((config.captions.selectedIndex + 1) > captionSources.length) {
+                plyr.captionExists = false;
+                _log('Caption index out of bound');
             } else {
+                captionSrc = captionSources[config.captions.selectedIndex];
                 _log('Caption track found; URI: ' + captionSrc);
             }
 
@@ -1066,6 +1098,8 @@
                 // This doesn't seem to work in Safari 7+, so the <track> elements are removed from the dom below
                 var tracks = plyr.media.textTracks;
                 for (var x = 0; x < tracks.length; x++) {
+                    // Remove the listener to prevent event overlapping
+                    _off(tracks[x], 'cuechange', _setActiveCueForTrack);
                     tracks[x].mode = 'hidden';
                 }
 
@@ -1089,20 +1123,16 @@
                 if (plyr.usingTextTracks) {
                     _log('TextTracks supported');
 
-                    for (var y = 0; y < tracks.length; y++) {
-                        var track = tracks[y];
+                    var track = tracks[config.captions.selectedIndex];
 
-                        if (track.kind === 'captions' || track.kind === 'subtitles') {
-                            _on(track, 'cuechange', function() {
-                                // Display a cue, if there is one
-                                if (this.activeCues[0] && 'text' in this.activeCues[0]) {
-                                    _setCaption(this.activeCues[0].getCueAsHTML());
-                                } else {
-                                    _setCaption();
-                                }
-                            });
+                    if (track.kind === 'captions' || track.kind === 'subtitles') {
+                        _on(track, 'cuechange', _setActiveCueForTrack);
+
+                        // if we change the active track while a cue is already displayed we need to update it
+                        if (track.activeCues && track.activeCues.length > 0) {
+                            _setActiveCueForTrack(track);
                         }
-                    }
+                     }
                 } else {
                     // Caption tracks not natively supported
                     _log('TextTracks not supported so rendering captions manually');
@@ -2425,6 +2455,20 @@
             _updateStorage({captionsEnabled: plyr.captionsEnabled});
         }
 
+        // Select active caption
+        function _setCaptionIndex(index){
+
+            //save active caption
+            config.captions.selectedIndex = index;
+
+            // clear caption
+            _setCaption();
+
+            // re-run setup
+            _setupCaptions();
+
+        }
+
         // Check if media is loading
         function _checkLoading(event) {
             var loading = (event.type === 'waiting');
@@ -3615,6 +3659,7 @@
             toggleCaptions:     _toggleCaptions,
             toggleFullscreen:   _toggleFullscreen,
             toggleControls:     _toggleControls,
+            setCaptionIndex:    _setCaptionIndex,
             isFullscreen:       function() { return plyr.isFullscreen || false; },
             support:            function(mimeType) { return _support.mime(plyr, mimeType); },
             destroy:            _destroy