fix(media): Improved the workflow to start and stop loading of HLS so…

…urces depending of autoplay/preload attributes
openplayerjs · Sep 7, 2018 · dfda5cd · dfda5cd
1 parent ccac5c2
commit dfda5cd
Show file tree

Hide file tree

Showing 9 changed files with 129 additions and 33 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -58,7 +58,7 @@ <h1>Video Sample</h1>
     <div class="players audio-player">
         <h1>Audio Sample</h1>
         <div id="stream-info" class="hidden"></div>
-        <audio class="om-player om-player__media" controls>
+        <audio class="om-player om-player__media" controls data-om-options='{"hls": {"startLevel": -1} }'>
             <source src="https://ccrma.stanford.edu/~jos/mp3/Latin.mp3" type="audio/mp3">
         </audio>
         <div>
@@ -129,17 +129,17 @@ <h1>Audio Sample</h1>
         var id = document.querySelector('.om-player__audio').id;
         var audioPlayer = OpenPlayer.instances[id];
 
-        // audioPlayer.getElement().addEventListener('hlsFragParsingMetadata', function (event) {
-        //     var encodedTag = event.detail.samples[0].data;
-        //     var parsedTag = [];
+        audioPlayer.getElement().addEventListener('hlsFragParsingMetadata', function (event) {
+            var encodedTag = event.detail.samples[0].data;
+            var parsedTag = [];
 
-        //     encodedTag.forEach(function (element) {
-        //         parsedTag.push(String.fromCharCode(element));
-        //     });
+            encodedTag.forEach(function (element) {
+                parsedTag.push(String.fromCharCode(element));
+            });
 
-        //     var tagAsString = parsedTag.toString().replace(/,/g, '');
-        //     extractMeta(tagAsString, audioPlayer.getElement());
-        // });
+            var tagAsString = parsedTag.toString().replace(/,/g, '');
+            extractMeta(tagAsString, audioPlayer.getElement());
+        });
 
         function extractMeta (data, audio) {
             var name, desc, title, artist, image, infoArea, metaInfo, startLoc, endLoc;

diff --git a/dist/openplayer.css b/dist/openplayer.css
@@ -743,10 +743,10 @@ video:-webkit-media-text-track-display {
     z-index: 1;
 }
 .om-player[data-fullscreen='true'] #om-ads {
-    z-index: 2147483645;
+    z-index: -1;
 }
-.om-player[data-fullscreen='true'] .om-player__play {
-    z-index: 2147483647;
+.om-player[data-fullscreen='true'].om-ads--active #om-ads {
+    z-index: 2147483645;
 }
 
 /* === Focus =================== */

diff --git a/dist/openplayer.js b/dist/openplayer.js
@@ -1305,7 +1305,7 @@ var Player = function () {
     key: "_prepareMedia",
     value: function _prepareMedia() {
       try {
-        this.media = new media_1.default(this.element, this.options);
+        this.media = new media_1.default(this.element, this.options, this.autoplay);
         this.media.load();
 
         if (this.adsUrl) {
@@ -5263,12 +5263,15 @@ var source = __webpack_require__(24);
 
 var Media = function () {
   function Media(element, options) {
+    var autoplay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
     _classCallCheck(this, Media);
 
     this.element = element;
     this.options = options;
     this.mediaFiles = this._getMediaFiles();
     this.promisePlay = null;
+    this.autoplay = autoplay;
     return this;
   }
 
@@ -5323,6 +5326,10 @@ var Media = function () {
         throw new TypeError('Media not set');
       }
 
+      if (this.media && typeof this.media.destroy === 'function') {
+        this.media.destroy();
+      }
+
       sources.some(function (media) {
         try {
           _this3.media = _this3._invoke(media);
@@ -5376,7 +5383,7 @@ var Media = function () {
     value: function _invoke(media) {
       if (source.isHlsSource(media.src)) {
         var hlsOptions = this.options && this.options.hls ? this.options.hls : undefined;
-        return new hls_1.default(this.element, media, hlsOptions);
+        return new hls_1.default(this.element, media, this.autoplay, hlsOptions);
       } else if (source.isDashSource(media.src)) {
         var dashOptions = this.options && this.options.dash ? this.options.dash : undefined;
         return new dash_1.default(this.element, media, dashOptions);
@@ -5671,16 +5678,20 @@ var native_1 = __webpack_require__(39);
 var HlsMedia = function (_native_1$default) {
   _inherits(HlsMedia, _native_1$default);
 
-  function HlsMedia(element, mediaSource, options) {
+  function HlsMedia(element, mediaSource) {
     var _this;
 
+    var autoplay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var options = arguments.length > 3 ? arguments[3] : undefined;
+
     _classCallCheck(this, HlsMedia);
 
     _this = _possibleConstructorReturn(this, _getPrototypeOf(HlsMedia).call(this, element, mediaSource));
     _this.events = {};
     _this.options = options;
     _this.element = element;
     _this.media = mediaSource;
+    _this.autoplay = autoplay;
     _this.promise = typeof Hls === 'undefined' ? general_1.loadScript('https://cdn.jsdelivr.net/npm/hls.js@latest') : new Promise(function (resolve) {
       resolve();
     });
@@ -5727,6 +5738,14 @@ var HlsMedia = function (_native_1$default) {
     value: function _create() {
       var _this3 = this;
 
+      var options = this.options;
+
+      if (!options) {
+        options = {};
+      }
+
+      var autoplay = !!(this.element.preload === 'auto' || this.autoplay);
+      options.autoStartLoad = autoplay;
       this.player = new Hls(this.options);
       this.events = Hls.Events;
       Object.keys(this.events).forEach(function (event) {
@@ -5738,6 +5757,19 @@ var HlsMedia = function (_native_1$default) {
           return _this3._assign(_this3.events[event], args);
         });
       });
+
+      if (!autoplay) {
+        this.element.addEventListener('play', function () {
+          if (_this3.player) {
+            _this3.player.startLoad();
+          }
+        });
+        this.element.addEventListener('pause', function () {
+          if (_this3.player) {
+            _this3.player.stopLoad();
+          }
+        });
+      }
     }
   }, {
     key: "_assign",
@@ -5786,6 +5818,8 @@ var HlsMedia = function (_native_1$default) {
     value: function _revoke() {
       var _this4 = this;
 
+      this.player.stopLoad();
+
       if (this.events) {
         Object.keys(this.events).forEach(function (event) {
           _this4.player.off(_this4.events[event], function () {
@@ -5796,9 +5830,18 @@ var HlsMedia = function (_native_1$default) {
             return _this4._assign(_this4.events[event], args);
           });
         });
-        this.events = null;
       }
 
+      this.element.removeEventListener('play', function () {
+        if (_this4.player) {
+          _this4.player.startLoad();
+        }
+      });
+      this.element.removeEventListener('pause', function () {
+        if (_this4.player) {
+          _this4.player.stopLoad();
+        }
+      });
       this.player.destroy();
     }
   }, {

diff --git a/dist/openplayer.min.css b/dist/openplayer.min.css
diff --git a/dist/openplayer.min.js b/dist/openplayer.min.js
diff --git a/src/css/player.css b/src/css/player.css
@@ -667,10 +667,10 @@ video:-webkit-media-text-track-display {
     z-index: 1;
 }
 .om-player[data-fullscreen='true'] #om-ads {
-    z-index: 2147483645;
+    z-index: -1;
 }
-.om-player[data-fullscreen='true'] .om-player__play {
-    z-index: 2147483647;
+.om-player[data-fullscreen='true'].om-ads--active #om-ads {
+    z-index: 2147483645;
 }
 
 /* === Focus =================== */

diff --git a/src/js/media.ts b/src/js/media.ts
@@ -57,6 +57,15 @@ class Media {
      */
     private options: PlayerOptions;
 
+    /**
+     * Flag to indicate if `autoplay` attribute was set
+     *
+     * @private
+     * @type boolean
+     * @memberof HlsMedia
+     */
+    private autoplay: boolean;
+
     /**
      * Create an instance of Media.
      *
@@ -65,11 +74,12 @@ class Media {
      * @returns {Media}
      * @memberof Media
      */
-    constructor(element: HTMLMediaElement, options?: PlayerOptions) {
+    constructor(element: HTMLMediaElement, options?: PlayerOptions, autoplay: boolean = false) {
         this.element = element;
         this.options = options;
         this.mediaFiles = this._getMediaFiles();
         this.promisePlay = null;
+        this.autoplay = autoplay;
         return this;
     }
 
@@ -317,6 +327,11 @@ class Media {
             throw new TypeError('Media not set');
         }
 
+        // Remove previous media if any is detected
+        if (this.media && typeof this.media.destroy === 'function') {
+            this.media.destroy();
+        }
+
         // Loop until first playable source is found
         sources.some(media => {
             try {
@@ -388,7 +403,7 @@ class Media {
     private _invoke(media: Source): HlsMedia|DashMedia|HTML5Media {
         if (source.isHlsSource(media.src)) {
             const hlsOptions = this.options && this.options.hls ? this.options.hls : undefined;
-            return new HlsMedia(this.element, media, hlsOptions);
+            return new HlsMedia(this.element, media, this.autoplay, hlsOptions);
         } else if (source.isDashSource(media.src)) {
             const dashOptions = this.options && this.options.dash ? this.options.dash : undefined;
             return new DashMedia(this.element, media, dashOptions);

diff --git a/src/js/media/hls.ts b/src/js/media/hls.ts
@@ -54,23 +54,33 @@ class HlsMedia extends Native {
      *
      * @see https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
      * @private
-     * @type {object}
+     * @type object
      * @memberof HlsMedia
      */
     private options: object;
 
+    /**
+     * Flag to indicate if `autoplay` attribute was set
+     *
+     * @private
+     * @type boolean
+     * @memberof HlsMedia
+     */
+    private autoplay: boolean;
+
     /**
      * Creates an instance of HlsMedia.
      *
      * @param {HTMLMediaElement} element
      * @param {Source} mediaSource
      * @memberof HlsMedia
      */
-    constructor(element: HTMLMediaElement, mediaSource: Source, options: {}) {
+    constructor(element: HTMLMediaElement, mediaSource: Source, autoplay: boolean = false, options: {}) {
         super(element, mediaSource);
         this.options = options;
         this.element = element;
         this.media = mediaSource;
+        this.autoplay = autoplay;
         this.promise = (typeof Hls === 'undefined') ?
             // Ever-green script
             loadScript('https://cdn.jsdelivr.net/npm/hls.js@latest') :
@@ -139,23 +149,40 @@ class HlsMedia extends Native {
     }
 
     /**
+     * Setup Hls player with options.
      *
+     * Some of the options/events will be overriden to improve performance and user's experience.
      *
      * @private
      * @memberof HlsMedia
      */
     private _create() {
-        // let { options } = this;
-        // if (!options) {
-        //     options = {};
-        // }
-        // (options as any).autoStartLoad = this.element.autoplay || false;
+        let { options } = this;
+        if (!options) {
+            options = {};
+        }
+        const autoplay = !!(this.element.preload === 'auto' || this.autoplay);
+        (options as any).autoStartLoad = autoplay;
 
         this.player = new Hls(this.options);
         this.events = Hls.Events;
         Object.keys(this.events).forEach(event => {
             this.player.on(this.events[event], (...args: any[]) => this._assign(this.events[event], args));
         });
+
+        if (!autoplay) {
+            this.element.addEventListener('play', () => {
+                if (this.player) {
+                    this.player.startLoad();
+                }
+            });
+
+            this.element.addEventListener('pause', () => {
+                if (this.player) {
+                    this.player.stopLoad();
+                }
+            });
+        }
     }
 
     /**
@@ -214,12 +241,23 @@ class HlsMedia extends Native {
      * @memberof HlsMedia
      */
     private _revoke(): void {
+        this.player.stopLoad();
         if (this.events) {
             Object.keys(this.events).forEach(event => {
                 this.player.off(this.events[event], (...args: any[]) => this._assign(this.events[event], args));
             });
-            this.events = null;
         }
+        this.element.removeEventListener('play', () => {
+            if (this.player) {
+                this.player.startLoad();
+            }
+        });
+
+        this.element.removeEventListener('pause', () => {
+            if (this.player) {
+                this.player.stopLoad();
+            }
+        });
         this.player.destroy();
     }
 }

diff --git a/src/js/player.ts b/src/js/player.ts
@@ -522,7 +522,7 @@ class Player {
      */
     private _prepareMedia(): void {
         try {
-            this.media = new Media(this.element, this.options);
+            this.media = new Media(this.element, this.options, this.autoplay);
             this.media.load();
 
             if (this.adsUrl) {