Merge pull request #97 from basil79/autoplay-failed

added workaround when autoplay is failed, using retries

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ads-manager",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "HTML5 Video Ads Manager based on @dailymotion/vast-client",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

public/index.html

@@ -53,6 +53,7 @@ <h1>Ads Manager</h1>
 <h3>VAST Tag URL/XML Inspector (VAST, VPAID):</h3>
 <textarea id="vast-url-input">https://eyevinn.adtest.eyevinn.technology/api/v1/vast?dur=30</textarea>
 <!-- https://v.adserve.tv/pg/vast-vpaid.xml -->
+<!-- https://vid.springserve.com/vast/184920?w=640&h=360 -->
 <button id="test-ad-button" class="primary-button">Test Ad</button>
 <button id="pause-ad-button" class="ad-button">Pause Ad</button>
 <!--<button id="resume-ad-button" class="ad-button">Resume Ad</button>-->
@@ -68,8 +69,8 @@ <h3>Ad Events:</h3>
 <br/>
 <br/>
 
-<script src="js/ads-manager.js?v=21"></script>
-<script src="js/index.js?v=20"></script>
+<script src="js/ads-manager.js?v=23"></script>
+<script src="js/index.js?v=22"></script>
 
 
 <br/>

src/ads-manager.js

@@ -973,23 +973,41 @@ AdsManager.prototype.init = function(width, height, viewMode, isNext = false) {
 AdsManager.prototype.start = function() {
   if(this.isCreativeExists()) {
 
+    // Override play function
+    // Backup origin play function
+    const _play = this._videoSlot.play;
+    const maxPlayRetries = 3;
+    let playRetries = 0;
+    this._videoSlot.play = function() {
+      //this.muted = true;
+      // Apply origin play, and connect to play Promise to detect autoplay exceptions
+      const _playPromise = _play.apply(this, [].slice.call(arguments));
+      if(_playPromise instanceof Promise) {
+        _playPromise.then(_=> {
+          // Autoplay worked!
+          console.log('autoplay worked!!!', this);
+        }).catch(err => {
+          // Autoplay failed
+          if(playRetries <= maxPlayRetries) {
+            // Try to play as muted if failed in autoplay
+            console.log('autoplay failed > play retries', playRetries);
+            this.muted = true;
+            this.play();
+
+            playRetries++;
+          }
+        });
+      }
+      return _playPromise;
+    };
+
     if (this._isVPAID) {
       this._isCreativeFunctionInvokable('startAd') && this._vpaidCreative.startAd();
     } else {
 
       //this._videoSlot.autoplay = true;
       this._videoSlot.load();
-      const playPromise = this._videoSlot.play();
-      if(playPromise !== undefined) {
-        playPromise.then(_ => {
-          console.log('playback started');
-        }).catch(err => {
-          // Auto-play was prevented
-          // Show paused UI.
-          console.log('prevented', err);
-          this._videoSlot.play()
-        });
-      }
+      this._videoSlot.play();
 
       this.onAdStarted();