@antmedia/web_player 2.8.2 → 2.8.3-ALPHA-29-03-2024

package/.github/workflows/publish-snapshot.yml

@@ -22,7 +22,8 @@ jobs:
       - run: npm install --include=dev
       - run: npm run compile
       - run: npm test
-      - run: npm version SNAPSHOT"-`date +"%Y-%b-%d-%I-%M"`"  --no-git-tag-version
+      #Fix this versioning for the snapshots
+      - run: npm version 2.8.3-SNAPSHOT"-`date +"%Y-%b-%d-%I-%M"`"  --no-git-tag-version
       - run: npm publish --tag SNAPSHOT
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/README.md

@@ -20,59 +20,71 @@ Install the Web Player package using npm:
 npm i @antmedia/web_player
 ```
 
-## Configuration Parameters
-
-The player accepts several configuration parameters, either through the URL or directly in the code:
-
-1. `id` (String): The stream ID to play. This parameter is mandatory.
-2. `token` (String): The token for stream access. It's mandatory if token security is enabled on the server side.
-3. `autoplay` (Boolean): Autoplay the stream if available. Optional. Default value is `true`.
-4. `mute` (Boolean): Start playing in mute mode if the stream is available. Optional. Default value is `true`.
-5. `playOrder` (String): The order of technologies used for playing. Optional. Default value is `"webrtc,hls"`. Possible values include `"hls,webrtc"`, `"webrtc"`, `"hls"`, `"vod"`, `"dash"`.
-6. `playType` (String): The order of play types used for playing. Optional. Default value is `"mp4,webm"`. Possible values include `"webm,mp4"`, `"mp4"`, `"webm"`, `"mov"`.
-7. `targetLatency` (Number): The target latency for the DASH player. Optional. Default value is `3`.
-8. `is360` (Boolean): Enable playback in 360 mode. Optional. Default value is `false`.
-
 ## Usage
 
 ### Basic Usage
 
-Import the `WebPlayer` and initialize it with the desired configuration:
+To use the Web Player, import it and initialize it with the parameters received from the URL. Refer to the Configuration Parameters section below for more details.
 
-```javascript
-import { WebPlayer } from "@antmedia/web_player";
+1. In your web application, create a div with the id video_container. This will serve as the container for the player.
 
-var embeddedPlayer = new WebPlayer(window, document.getElementById("video_container"), document.getElementById("video_info"));
+  ```
+  <div id="video_container" ></div>
+  ````
+  
+2. Initialize the player as follows:
+  ```javascript
+  import { WebPlayer } from "@antmedia/web_player";
 
-embeddedPlayer.initialize().then(() => {
+  var embeddedPlayer = new WebPlayer(window, document.getElementById("video_container"), null);
+
+  embeddedPlayer.initialize().then(() => {
     embeddedPlayer.play();
-});
-```
+  });
+  ```
 
 The sample for this usage is available in [play.html in StreamApp](https://github.com/ant-media/StreamApp/blob/master/src/main/webapp/play.html)
 
 ### Advanced Usage
-You can also pass the parameters as an object to the WebPlayer constructor:
-
-```javascript
-var player = new WebPlayer({
-    streamId: streamId,
-    httpBaseURL: "http://example.antmedia.io:5080/WebRTCAppEE",
-    token: tokenId,
-    playOrder: ["webrtc", "hls", "dash"],
-    videoHTMLContent: '<video id="video-player" class="video-js vjs-default-skin vjs-big-play-centered" controls playsinline style="width:100%;height:100%"></video>',
-}, document.getElementById("video_container"), null);
-
-player.initialize().then(() => {
+Alternatively, you can pass the parameters as an object to the WebPlayer constructor.
+
+
+1. In your web application, create a div with the id video_container. This will serve as the container for the player.
+  ```
+  <div id="video_container" ></div>
+  ````
+
+2. Initialize the player as follows
+  ```javascript
+  var player = new WebPlayer({
+    streamId: "myStreamId",
+    httpBaseURL: "http://example.antmedia.io:5080/WebRTCAppEE/", //Remember to add trailing slash(/)
+  }, document.getElementById("video_container"), null);
+
+  player.initialize().then(() => {
     player.play();
-}).catch((error) => {
+  }).catch((error) => {
     console.error("Error while initializing embedded player: " + error);
-});
-```
+  });
+  ```
 
 The sample for this usage is available in [app.page.component.ts in Ant-Media-Management-Console](https://github.com/ant-media/Ant-Media-Management-Console/blob/master/src/app/app.page/app.page.component.ts)
 
 
+## Configuration Parameters
+
+The player accepts several configuration parameters, either through the URL or directly in the code:
+
+1. `id` (String): The stream ID to play. This parameter is mandatory.
+2. `token` (String): The token for stream access. It's mandatory if token security is enabled on the server side.
+3. `autoplay` (Boolean): Autoplay the stream if available. Optional. Default value is `true`.
+4. `mute` (Boolean): Start playing in mute mode if the stream is available. Optional. Default value is `true`.
+5. `playOrder` (String): The order of technologies used for playing. Optional. Default value is `"webrtc,hls"`. Possible values include `"hls,webrtc"`, `"webrtc"`, `"hls"`, `"vod"`, `"dash"`.
+6. `playType` (String): The order of play types used for playing. Optional. Default value is `"mp4,webm"`. Possible values include `"webm,mp4"`, `"mp4"`, `"webm"`, `"mov"`.
+7. `targetLatency` (Number): The target latency for the DASH player. Optional. Default value is `3`.
+8. `is360` (Boolean): Enable playback in 360 mode. Optional. Default value is `false`.
+
+
 ## Support
 For support and further inquiries, please visit [Ant Media Server's community](https://github.com/orgs/ant-media/discussions). If you are an enterprise user, you can receive support by sending an email to support@antmedia.io.
 

package/dist/browser/web_player.js

@@ -112,11 +112,14 @@
        */
       _defineProperty(this, "autoPlay", true);
       /**
-       * mute: if true, player will be started muted. Optional. Default value is true.
-       * default value is true because of browser's autoplay policy.
+       * mute: if false the player will try to auto play the stream with audio if it fails player will mute the audio and try again to autoplay it.
        * It will be taken from url parameter "mute".
        */
-      _defineProperty(this, "mute", true);
+      _defineProperty(this, "mute", false);
+      /**
+       * Force the Player to play with audio Auto Play might not work.
+       */
+      _defineProperty(this, "forcePlayWithAudio", false);
       /**
        * targetLatency: target latency in seconds. Optional. Default value is 3.
        * It will be taken from url parameter "targetLatency".
@@ -293,7 +296,7 @@
       this.playType = WebPlayer.DEFAULT_PLAY_TYPE;
       this.token = null;
       this.autoPlay = true;
-      this.mute = true;
+      this.mute = false;
       this.targetLatency = 3;
       this.subscriberId = null;
       this.subscriberCode = null;
@@ -317,6 +320,7 @@
       this.dashjsLoaded = false;
       this.containerElementInitialDisplay = "block";
       this.placeHolderElementInitialDisplay = "block";
+      this.forcePlayWithAudio = false;
     }
     initializeFromUrlParams() {
       var _getUrlParameter;
@@ -342,7 +346,9 @@
       var muteLocal = fetch_stream.getUrlParameter("mute", this.window.location.search);
       if (muteLocal === "false") {
         this.mute = false;
-      } else {
+        //user specifically asks to play with audio so if it fails in auto play, it will not try to play without audio
+        this.forcePlayWithAudio = true;
+      } else if (muteLocal === "true") {
         this.mute = true;
       }
       var localTargetLatency = fetch_stream.getUrlParameter("targetLatency", this.window.location.search);
@@ -514,7 +520,7 @@
         autoplay: this.autoPlay
       });
       this.videojsPlayer.on('error', e => {
-        loglevel_min.Logger.warn("There is an error in playback: " + e);
+        loglevel_min.Logger.warn("There is an error in playback: ", e);
         // We need to add this kind of check. If we don't add this kind of checkpoint, it will create an infinite loop
         if (!this.errorCalled) {
           this.errorCalled = true;
@@ -559,15 +565,21 @@
       //hls specific calls
       if (extension == "m3u8") {
         videojs.Vhs.xhr.beforeRequest = options => {
-          var securityParams = this.getSecurityQueryParams();
-          if (!options.uri.includes(securityParams)) {
-            if (!options.uri.endsWith("?")) {
-              options.uri = options.uri + "?";
-            }
-            options.uri += securityParams;
+          var queryParams = [];
+          if (!options.uri.includes("subscriberId") && this.subscriberId != null) {
+            queryParams.push("subscriberId=".concat(this.subscriberId));
+          }
+          if (!options.uri.includes("subscriberCode") && this.subscriberCode != null) {
+            queryParams.push("subscriberCode=".concat(this.subscriberCode));
+          }
+          if (!options.uri.includes("token") && this.token != null) {
+            queryParams.push("token=".concat(this.token));
+          }
+          if (queryParams.length > 0) {
+            var queryString = queryParams.join("&");
+            options.uri += options.uri.includes("?") ? "&".concat(queryString) : "?".concat(queryString);
           }
           loglevel_min.Logger.debug("hls request: " + options.uri);
-          return options;
         };
         this.videojsPlayer.ready(() => {
           // If it's already added to player, no need to add again
@@ -654,7 +666,16 @@
         reconnect: false //webrtc adaptor has auto reconnect scenario, just disable it, we manage it here
       });
       if (this.autoPlay) {
+        //try to play directly
         this.videojsPlayer.play().catch(e => {
+          //if it's not allowed error and default value are being used, try to play it muted
+          //if this.forcePlayWithAudio is true, it means user specifically ask to do. 
+          // If it's false, it's default value so that we can proceed to try to play with muted
+          //This implementation is added because of auto play policy of the browsers
+          if (e.name === "NotAllowedError" && !this.forcePlayWithAudio) {
+            this.videojsPlayer.muted(true);
+            this.videojsPlayer.play();
+          }
           loglevel_min.Logger.warn("Problem in playback. The error is " + e);
         });
       }
@@ -814,11 +835,26 @@
         }
       });
       this.dashPlayer.on(dashjs.MediaPlayer.events.PLAYBACK_ERROR, event => {
+        loglevel_min.Logger.warn("dash playback error: " + event);
         this.tryNextTech();
       });
       this.dashPlayer.on(dashjs.MediaPlayer.events.ERROR, event => {
+        loglevel_min.Logger.warn("error: " + event);
         this.tryNextTech();
       });
+      this.dashPlayer.on(dashjs.MediaPlayer.events.PLAYBACK_NOT_ALLOWED, event => {
+        loglevel_min.Logger.warn("dash playback not allowed: " + event);
+        this.handleDashPlayBackNotAllowed();
+      });
+    }
+    handleDashPlayBackNotAllowed() {
+      if (!this.forcePlayWithAudio) {
+        loglevel_min.Logger.info("Try to play with muted audio");
+        this.dashPlayer.setMute(true);
+        this.dashPlayer.play();
+      } else {
+        this.tryNextTech();
+      }
     }
     makeDashPlayerVisibleWhenInitialized() {
       this.dashPlayer.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, event => {

package/dist/es/index.d.ts

@@ -55,11 +55,14 @@ export declare class WebPlayer {
      */
     autoPlay: boolean;
     /**
-     * mute: if true, player will be started muted. Optional. Default value is true.
-     * default value is true because of browser's autoplay policy.
+     * mute: if false the player will try to auto play the stream with audio if it fails player will mute the audio and try again to autoplay it.
      * It will be taken from url parameter "mute".
      */
     mute: boolean;
+    /**
+     * Force the Player to play with audio Auto Play might not work.
+     */
+    forcePlayWithAudio: boolean;
     /**
      * targetLatency: target latency in seconds. Optional. Default value is 3.
      * It will be taken from url parameter "targetLatency".
@@ -176,6 +179,7 @@ export declare class WebPlayer {
          */
      playViaDash(streamUrl: any): void;
      dashLatencyTimer: NodeJS.Timeout | undefined;
+     handleDashPlayBackNotAllowed(): void;
      makeDashPlayerVisibleWhenInitialized(): void;
      /**
       * destroy the dash player

package/dist/es/web_player.js

@@ -400,11 +400,14 @@ class WebPlayer {
      */
     _defineProperty(this, "autoPlay", true);
     /**
-     * mute: if true, player will be started muted. Optional. Default value is true.
-     * default value is true because of browser's autoplay policy.
+     * mute: if false the player will try to auto play the stream with audio if it fails player will mute the audio and try again to autoplay it.
      * It will be taken from url parameter "mute".
      */
-    _defineProperty(this, "mute", true);
+    _defineProperty(this, "mute", false);
+    /**
+     * Force the Player to play with audio Auto Play might not work.
+     */
+    _defineProperty(this, "forcePlayWithAudio", false);
     /**
      * targetLatency: target latency in seconds. Optional. Default value is 3.
      * It will be taken from url parameter "targetLatency".
@@ -581,7 +584,7 @@ class WebPlayer {
     this.playType = WebPlayer.DEFAULT_PLAY_TYPE;
     this.token = null;
     this.autoPlay = true;
-    this.mute = true;
+    this.mute = false;
     this.targetLatency = 3;
     this.subscriberId = null;
     this.subscriberCode = null;
@@ -605,6 +608,7 @@ class WebPlayer {
     this.dashjsLoaded = false;
     this.containerElementInitialDisplay = "block";
     this.placeHolderElementInitialDisplay = "block";
+    this.forcePlayWithAudio = false;
   }
   initializeFromUrlParams() {
     var _getUrlParameter;
@@ -630,7 +634,9 @@ class WebPlayer {
     var muteLocal = getUrlParameter_1("mute", this.window.location.search);
     if (muteLocal === "false") {
       this.mute = false;
-    } else {
+      //user specifically asks to play with audio so if it fails in auto play, it will not try to play without audio
+      this.forcePlayWithAudio = true;
+    } else if (muteLocal === "true") {
       this.mute = true;
     }
     var localTargetLatency = getUrlParameter_1("targetLatency", this.window.location.search);
@@ -802,7 +808,7 @@ class WebPlayer {
       autoplay: this.autoPlay
     });
     this.videojsPlayer.on('error', e => {
-      Logger_1.warn("There is an error in playback: " + e);
+      Logger_1.warn("There is an error in playback: ", e);
       // We need to add this kind of check. If we don't add this kind of checkpoint, it will create an infinite loop
       if (!this.errorCalled) {
         this.errorCalled = true;
@@ -847,15 +853,21 @@ class WebPlayer {
     //hls specific calls
     if (extension == "m3u8") {
       videojs.Vhs.xhr.beforeRequest = options => {
-        var securityParams = this.getSecurityQueryParams();
-        if (!options.uri.includes(securityParams)) {
-          if (!options.uri.endsWith("?")) {
-            options.uri = options.uri + "?";
-          }
-          options.uri += securityParams;
+        var queryParams = [];
+        if (!options.uri.includes("subscriberId") && this.subscriberId != null) {
+          queryParams.push("subscriberId=".concat(this.subscriberId));
+        }
+        if (!options.uri.includes("subscriberCode") && this.subscriberCode != null) {
+          queryParams.push("subscriberCode=".concat(this.subscriberCode));
+        }
+        if (!options.uri.includes("token") && this.token != null) {
+          queryParams.push("token=".concat(this.token));
+        }
+        if (queryParams.length > 0) {
+          var queryString = queryParams.join("&");
+          options.uri += options.uri.includes("?") ? "&".concat(queryString) : "?".concat(queryString);
         }
         Logger_1.debug("hls request: " + options.uri);
-        return options;
       };
       this.videojsPlayer.ready(() => {
         // If it's already added to player, no need to add again
@@ -942,7 +954,16 @@ class WebPlayer {
       reconnect: false //webrtc adaptor has auto reconnect scenario, just disable it, we manage it here
     });
     if (this.autoPlay) {
+      //try to play directly
       this.videojsPlayer.play().catch(e => {
+        //if it's not allowed error and default value are being used, try to play it muted
+        //if this.forcePlayWithAudio is true, it means user specifically ask to do. 
+        // If it's false, it's default value so that we can proceed to try to play with muted
+        //This implementation is added because of auto play policy of the browsers
+        if (e.name === "NotAllowedError" && !this.forcePlayWithAudio) {
+          this.videojsPlayer.muted(true);
+          this.videojsPlayer.play();
+        }
         Logger_1.warn("Problem in playback. The error is " + e);
       });
     }
@@ -1102,11 +1123,26 @@ class WebPlayer {
       }
     });
     this.dashPlayer.on(dashjs.MediaPlayer.events.PLAYBACK_ERROR, event => {
+      Logger_1.warn("dash playback error: " + event);
       this.tryNextTech();
     });
     this.dashPlayer.on(dashjs.MediaPlayer.events.ERROR, event => {
+      Logger_1.warn("error: " + event);
       this.tryNextTech();
     });
+    this.dashPlayer.on(dashjs.MediaPlayer.events.PLAYBACK_NOT_ALLOWED, event => {
+      Logger_1.warn("dash playback not allowed: " + event);
+      this.handleDashPlayBackNotAllowed();
+    });
+  }
+  handleDashPlayBackNotAllowed() {
+    if (!this.forcePlayWithAudio) {
+      Logger_1.info("Try to play with muted audio");
+      this.dashPlayer.setMute(true);
+      this.dashPlayer.play();
+    } else {
+      this.tryNextTech();
+    }
   }
   makeDashPlayerVisibleWhenInitialized() {
     this.dashPlayer.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, event => {

package/dist/index.d.ts

@@ -55,11 +55,14 @@ export declare class WebPlayer {
      */
     autoPlay: boolean;
     /**
-     * mute: if true, player will be started muted. Optional. Default value is true.
-     * default value is true because of browser's autoplay policy.
+     * mute: if false the player will try to auto play the stream with audio if it fails player will mute the audio and try again to autoplay it.
      * It will be taken from url parameter "mute".
      */
     mute: boolean;
+    /**
+     * Force the Player to play with audio Auto Play might not work.
+     */
+    forcePlayWithAudio: boolean;
     /**
      * targetLatency: target latency in seconds. Optional. Default value is 3.
      * It will be taken from url parameter "targetLatency".
@@ -122,8 +125,10 @@ export declare class WebPlayer {
      * Field to keep if tryNextMethod is already called
      */
     tryNextTechTimer: any;
-    websocketURL: any;
+    containerElementInitialDisplay: any;
+    placeHolderElementInitialDisplay: any;
     httpBaseURL: string;
+    websocketURL: any;
     dom: any;
     isWindow(configOrWindow: any): any;
     initialize(): Promise<any>;
@@ -174,6 +179,7 @@ export declare class WebPlayer {
          */
      playViaDash(streamUrl: any): void;
      dashLatencyTimer: NodeJS.Timeout | undefined;
+     handleDashPlayBackNotAllowed(): void;
      makeDashPlayerVisibleWhenInitialized(): void;
      /**
       * destroy the dash player

package/dist/web_player.js

@@ -402,11 +402,14 @@ class WebPlayer {
      */
     _defineProperty(this, "autoPlay", true);
     /**
-     * mute: if true, player will be started muted. Optional. Default value is true.
-     * default value is true because of browser's autoplay policy.
+     * mute: if false the player will try to auto play the stream with audio if it fails player will mute the audio and try again to autoplay it.
      * It will be taken from url parameter "mute".
      */
-    _defineProperty(this, "mute", true);
+    _defineProperty(this, "mute", false);
+    /**
+     * Force the Player to play with audio Auto Play might not work.
+     */
+    _defineProperty(this, "forcePlayWithAudio", false);
     /**
      * targetLatency: target latency in seconds. Optional. Default value is 3.
      * It will be taken from url parameter "targetLatency".
@@ -583,7 +586,7 @@ class WebPlayer {
     this.playType = WebPlayer.DEFAULT_PLAY_TYPE;
     this.token = null;
     this.autoPlay = true;
-    this.mute = true;
+    this.mute = false;
     this.targetLatency = 3;
     this.subscriberId = null;
     this.subscriberCode = null;
@@ -607,6 +610,7 @@ class WebPlayer {
     this.dashjsLoaded = false;
     this.containerElementInitialDisplay = "block";
     this.placeHolderElementInitialDisplay = "block";
+    this.forcePlayWithAudio = false;
   }
   initializeFromUrlParams() {
     var _getUrlParameter;
@@ -632,7 +636,9 @@ class WebPlayer {
     var muteLocal = getUrlParameter_1("mute", this.window.location.search);
     if (muteLocal === "false") {
       this.mute = false;
-    } else {
+      //user specifically asks to play with audio so if it fails in auto play, it will not try to play without audio
+      this.forcePlayWithAudio = true;
+    } else if (muteLocal === "true") {
       this.mute = true;
     }
     var localTargetLatency = getUrlParameter_1("targetLatency", this.window.location.search);
@@ -804,7 +810,7 @@ class WebPlayer {
       autoplay: this.autoPlay
     });
     this.videojsPlayer.on('error', e => {
-      Logger_1.warn("There is an error in playback: " + e);
+      Logger_1.warn("There is an error in playback: ", e);
       // We need to add this kind of check. If we don't add this kind of checkpoint, it will create an infinite loop
       if (!this.errorCalled) {
         this.errorCalled = true;
@@ -849,15 +855,21 @@ class WebPlayer {
     //hls specific calls
     if (extension == "m3u8") {
       videojs.Vhs.xhr.beforeRequest = options => {
-        var securityParams = this.getSecurityQueryParams();
-        if (!options.uri.includes(securityParams)) {
-          if (!options.uri.endsWith("?")) {
-            options.uri = options.uri + "?";
-          }
-          options.uri += securityParams;
+        var queryParams = [];
+        if (!options.uri.includes("subscriberId") && this.subscriberId != null) {
+          queryParams.push("subscriberId=".concat(this.subscriberId));
+        }
+        if (!options.uri.includes("subscriberCode") && this.subscriberCode != null) {
+          queryParams.push("subscriberCode=".concat(this.subscriberCode));
+        }
+        if (!options.uri.includes("token") && this.token != null) {
+          queryParams.push("token=".concat(this.token));
+        }
+        if (queryParams.length > 0) {
+          var queryString = queryParams.join("&");
+          options.uri += options.uri.includes("?") ? "&".concat(queryString) : "?".concat(queryString);
         }
         Logger_1.debug("hls request: " + options.uri);
-        return options;
       };
       this.videojsPlayer.ready(() => {
         // If it's already added to player, no need to add again
@@ -944,7 +956,16 @@ class WebPlayer {
       reconnect: false //webrtc adaptor has auto reconnect scenario, just disable it, we manage it here
     });
     if (this.autoPlay) {
+      //try to play directly
       this.videojsPlayer.play().catch(e => {
+        //if it's not allowed error and default value are being used, try to play it muted
+        //if this.forcePlayWithAudio is true, it means user specifically ask to do. 
+        // If it's false, it's default value so that we can proceed to try to play with muted
+        //This implementation is added because of auto play policy of the browsers
+        if (e.name === "NotAllowedError" && !this.forcePlayWithAudio) {
+          this.videojsPlayer.muted(true);
+          this.videojsPlayer.play();
+        }
         Logger_1.warn("Problem in playback. The error is " + e);
       });
     }
@@ -1104,11 +1125,26 @@ class WebPlayer {
       }
     });
     this.dashPlayer.on(dashjs.MediaPlayer.events.PLAYBACK_ERROR, event => {
+      Logger_1.warn("dash playback error: " + event);
       this.tryNextTech();
     });
     this.dashPlayer.on(dashjs.MediaPlayer.events.ERROR, event => {
+      Logger_1.warn("error: " + event);
       this.tryNextTech();
     });
+    this.dashPlayer.on(dashjs.MediaPlayer.events.PLAYBACK_NOT_ALLOWED, event => {
+      Logger_1.warn("dash playback not allowed: " + event);
+      this.handleDashPlayBackNotAllowed();
+    });
+  }
+  handleDashPlayBackNotAllowed() {
+    if (!this.forcePlayWithAudio) {
+      Logger_1.info("Try to play with muted audio");
+      this.dashPlayer.setMute(true);
+      this.dashPlayer.play();
+    } else {
+      this.tryNextTech();
+    }
   }
   makeDashPlayerVisibleWhenInitialized() {
     this.dashPlayer.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, event => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antmedia/web_player",
-  "version": "2.8.2",
+  "version": "2.8.3-ALPHA-29-03-2024",
   "description": "Ant Media Server Player that can play WebRTC, HLS, DASH",
   "main": "dist/index.js",
   "module": "dist/es/index.js",

package/src/web_player.js

@@ -78,17 +78,22 @@ export class WebPlayer {
     autoPlay = true;
 
     /**
-     * mute: if true, player will be started muted. Optional. Default value is true.
-     * default value is true because of browser's autoplay policy.
+     * mute: if false the player will try to auto play the stream with audio if it fails player will mute the audio and try again to autoplay it.
      * It will be taken from url parameter "mute".
      */
-    mute = true;
+    mute = false;
+
+    /**
+     * Force the Player to play with audio Auto Play might not work.
+     */
+    forcePlayWithAudio = false;
 
     /**
      * targetLatency: target latency in seconds. Optional. Default value is 3.
      * It will be taken from url parameter "targetLatency".
      * It's used for dash(cmaf) playback.
      */
+    
     targetLatency = 3;
 
     /**
@@ -161,6 +166,7 @@ export class WebPlayer {
      */
     tryNextTechTimer;
 
+
     constructor(configOrWindow, containerElement, placeHolderElement) {
 
 		WebPlayer.DEFAULT_PLAY_ORDER = ["webrtc", "hls"];;
@@ -312,7 +318,7 @@ export class WebPlayer {
         this.playType = WebPlayer.DEFAULT_PLAY_TYPE;
         this.token = null;
         this.autoPlay = true;
-        this.mute = true;
+        this.mute = false;
         this.targetLatency = 3;
         this.subscriberId = null;
         this.subscriberCode = null;
@@ -336,6 +342,7 @@ export class WebPlayer {
         this.dashjsLoaded = false;
         this.containerElementInitialDisplay = "block";
         this.placeHolderElementInitialDisplay = "block";
+        this.forcePlayWithAudio = false;
     }
     
     initializeFromUrlParams() {
@@ -365,11 +372,13 @@ export class WebPlayer {
 		
 	    let muteLocal = getUrlParameter("mute", this.window.location.search);
 		if (muteLocal === "false") {
-			this.mute = false;
-		}
-		else {
-			this.mute = true;
-		}
+            this.mute = false;
+            //user specifically asks to play with audio so if it fails in auto play, it will not try to play without audio
+			this.forcePlayWithAudio = true;
+		}else if(muteLocal === "true"){
+            this.mute = true;
+        }
+        
 		
 		let localTargetLatency = getUrlParameter("targetLatency", this.window.location.search);
 	    if (localTargetLatency != null) {
@@ -571,7 +580,7 @@ export class WebPlayer {
         });
 
         this.videojsPlayer.on('error', (e) => {
-            Logger.warn("There is an error in playback: " + e);
+            Logger.warn("There is an error in playback: ", e);
             // We need to add this kind of check. If we don't add this kind of checkpoint, it will create an infinite loop
             if (!this.errorCalled) {
                 this.errorCalled = true;
@@ -627,19 +636,26 @@ export class WebPlayer {
 		//hls specific calls
 		if (extension == "m3u8") {
 	        videojs.Vhs.xhr.beforeRequest = (options) => {
+                const queryParams = [];
 
-                let securityParams = this.getSecurityQueryParams();
-                if (!options.uri.includes(securityParams))
-                {
-                    if (!options.uri.endsWith("?"))
-                    {
-                        options.uri = options.uri + "?";
-                    }
-                    options.uri += securityParams;
+                if (!options.uri.includes("subscriberId") && this.subscriberId != null) {
+                    queryParams.push(`subscriberId=${this.subscriberId}`);
                 }
 
+                if (!options.uri.includes("subscriberCode") && this.subscriberCode != null) {
+                    queryParams.push(`subscriberCode=${this.subscriberCode}`);
+                }
+
+                if (!options.uri.includes("token") && this.token != null) {
+                    queryParams.push(`token=${this.token}`);
+                }
+
+                if (queryParams.length > 0) {
+                    const queryString = queryParams.join("&");
+                    options.uri += options.uri.includes("?") ? `&${queryString}` : `?${queryString}`;
+                }
                 Logger.debug("hls request: " + options.uri);
-	            return options;
+
 	        };
 
 
@@ -739,9 +755,19 @@ export class WebPlayer {
         });
 
         if (this.autoPlay) {
+            //try to play directly
             this.videojsPlayer.play().catch((e) => {
-				 Logger.warn("Problem in playback. The error is " + e);
-			});
+
+                //if it's not allowed error and default value are being used, try to play it muted
+                //if this.forcePlayWithAudio is true, it means user specifically ask to do. 
+                // If it's false, it's default value so that we can proceed to try to play with muted
+                //This implementation is added because of auto play policy of the browsers
+                if (e.name === "NotAllowedError" && !this.forcePlayWithAudio) {
+                    this.videojsPlayer.muted(true);
+                    this.videojsPlayer.play();
+                }
+                Logger.warn("Problem in playback. The error is " + e);
+            });
         }
     }
 
@@ -926,11 +952,29 @@ export class WebPlayer {
             }
         });
         this.dashPlayer.on(dashjs.MediaPlayer.events.PLAYBACK_ERROR, (event) => {
+            Logger.warn("dash playback error: " + event);
             this.tryNextTech();
         });
         this.dashPlayer.on(dashjs.MediaPlayer.events.ERROR, (event) => {
+            Logger.warn("error: " + event);
             this.tryNextTech();
         });
+
+        this.dashPlayer.on(dashjs.MediaPlayer.events.PLAYBACK_NOT_ALLOWED, (event) => {
+            Logger.warn("dash playback not allowed: " + event);
+            this.handleDashPlayBackNotAllowed();
+        });
+    }
+
+    handleDashPlayBackNotAllowed() {
+        if (!this.forcePlayWithAudio) {
+            Logger.info("Try to play with muted audio");
+            this.dashPlayer.setMute(true);
+            this.dashPlayer.play();
+        }
+        else {
+            this.tryNextTech();
+        }
     }
 
     makeDashPlayerVisibleWhenInitialized() {

package/test/embedded-player.test.js

@@ -45,8 +45,8 @@ describe("WebPlayer", function() {
 	      //the following is a test autoPlay is still true in mobile. We just try to play the stream if mobile browser can play or not
 		  //in autoPlay mode 
 	      expect(player.autoPlay).to.true;
-	      expect(player.mute).to.true;
-	      expect(player.isMuted()).to.be.true;
+	      expect(player.mute).to.false;
+	      expect(player.isMuted()).to.be.false;
 	      expect(player.targetLatency).to.equal(3);
 	      expect(player.subscriberId).to.be.null;
 	      expect(player.subscriberCode).to.be.null;
@@ -164,8 +164,8 @@ describe("WebPlayer", function() {
 		  //the following is a test autoPlay is still true in mobile. We just try to play the stream if mobile browser can play or not
 		  //in autoPlay mode 
 		expect(player.autoPlay).to.true;
-		expect(player.mute).to.true;
-		expect(player.isMuted()).to.be.true;
+		expect(player.mute).to.false;
+		expect(player.isMuted()).to.be.false;
 		expect(player.targetLatency).to.equal(3);
 		expect(player.subscriberId).to.be.null;
 		expect(player.subscriberCode).to.be.null;
@@ -786,6 +786,70 @@ describe("WebPlayer", function() {
 		
 
 	});
+
+	it("testAutoPlay",async function(){
+		var videoContainer = document.createElement("video_container");
+		  
+		var placeHolder = document.createElement("place_holder");
+		  			
+		var locationComponent = { href: 'http://example.com?id=stream123.mp4', search: "?id=stream123.mp4", pathname: "/", protocol: "http:"  };
+		var windowComponent = {  location : locationComponent,
+		  						  document:  document,
+		  						  addEventListener: window.addEventListener};
+		  						  		 	      
+	    var player = new WebPlayer(windowComponent, videoContainer, placeHolder);
+	    let vjsMock = videojs(WebPlayer.VIDEO_PLAYER_ID, {
+			poster: "test",
+            liveui:true ,
+            liveTracker: {
+                trackingThreshold: 0
+            },
+            html5: {
+                vhs: {
+                    limitRenditionByPlayerDimensions: false
+                }
+            },
+            controls: true,
+            class: 'video-js vjs-default-skin vjs-big-play-centered',
+            muted: false,
+            preload: "auto",
+            autoplay: true
+		});
+
+		const mockVideoJS = sinon.stub(window, 'videojs').callsFake(()=>{return vjsMock});
+	    var muted = sinon.replace(vjsMock, "muted", sinon.fake());
+		let play = sinon.stub(vjsMock, 'play').callsFake(()=>{
+			return Promise.resolve();
+		});
+		await player.playIfExists("webrtc");  // autoplay worked with audio
+		expect(play.calledOnce).to.be.true;
+	    expect(muted.notCalled).to.be.true;
+		
+		play.restore();
+
+		play = sinon.stub(vjsMock, 'play').callsFake(()=>{
+			return Promise.reject(new DOMException("NotAllowedError","NotAllowedError"));
+		});
+		player.forcePlayWithAudio = true;
+
+		await player.playIfExists("webrtc");  // autoplay failed force play with audio 
+		expect(play.calledOnce).to.be.true;
+	    expect(muted.notCalled).to.be.true;
+			
+		play.restore();
+
+
+		play = sinon.stub(vjsMock, 'play').callsFake(()=>{
+			return Promise.reject(new DOMException("NotAllowedError","NotAllowedError"));
+		});
+		player.forcePlayWithAudio = false;
+		await player.playIfExists("webrtc");  // autoplay failed try to play without audio
+
+		expect(play.calledTwice).to.be.true;
+	    expect(muted.calledWithMatch(true)).to.be.true;
+		
+		sinon.restore();		
+	})
 	
 	
 	it("webrtc-info-event", async function() {
@@ -885,9 +949,52 @@ describe("WebPlayer", function() {
 		result = player.sendWebRTCData("data");
 		expect(result).to.be.false;
 		expect(sendDataViaWebRTC.callCount).to.be.equal(1);
+	});
+
+
+	it("handleDashPlayBackNotAllowed", async function(){
+			
+	    this.timeout(10000);
+		var videoContainer = document.createElement("video_container");
+		  
+	
+ 
+		var player = new WebPlayer({
+			streamId:"streamConfig",
+		}, videoContainer, null);
+		
+		
+		{
+			player.playOrder = ["dash"];
+			await player.initialize().then(()=> {
+				
+			}).catch((err) => {
+				expect.fail("it should not fail because we skip videojs and dash is already loaded");
+			});
+		}
+
+		player.dashPlayer = window.dashjs.MediaPlayer().create();
+
+		var setMute = sinon.replace(player.dashPlayer, "setMute", sinon.fake());
+		var play = sinon.replace(player.dashPlayer, "play", sinon.fake());
+		var nextTech = sinon.replace(player, "tryNextTech", sinon.fake());
+
+		expect(player.forcePlayWithAudio).to.be.false;
+		player.handleDashPlayBackNotAllowed();
+		expect(setMute.calledOnce).to.be.true;
+		expect(play.calledOnce).to.be.true;
+		expect(nextTech.notCalled).to.be.true;
+
+		expect(setMute.calledWithExactly(true)).to.be.true;
+
+
+		player.forcePlayWithAudio = true;
+		player.handleDashPlayBackNotAllowed();
+		expect(setMute.calledOnce).to.be.true;
+		expect(play.calledOnce).to.be.true;
+		expect(nextTech.calledOnce).to.be.true;
+
 		
-	    
-	    
 		
 	});
 	

package/.project

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<projectDescription>
-	<name>Embedded-Player</name>
-	<comment></comment>
-	<projects>
-	</projects>
-	<buildSpec>
-		<buildCommand>
-			<name>org.eclipse.wst.validation.validationbuilder</name>
-			<arguments>
-			</arguments>
-		</buildCommand>
-	</buildSpec>
-	<natures>
-		<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
-	</natures>
-</projectDescription>

package/.settings/.jsdtscope

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<classpath>
-	<classpathentry kind="con" path="org.eclipse.wst.jsdt.launching.JRE_CONTAINER"/>
-	<classpathentry kind="con" path="org.eclipse.wst.jsdt.launching.baseBrowserLibrary"/>
-	<classpathentry kind="src" path=""/>
-	<classpathentry kind="output" path=""/>
-</classpath>

package/.settings/org.eclipse.wst.jsdt.ui.superType.container

@@ -1 +0,0 @@
-org.eclipse.wst.jsdt.launching.JRE_CONTAINER

package/.settings/org.eclipse.wst.jsdt.ui.superType.name

@@ -1 +0,0 @@
-Global