refactor: Update autoplay sample and how we report adsWillAutoplay an… (

#562)

* refactor: Update autoplay sample and how we report adsWillAutoplay and adsWillPlayMuted.
Also deprecates the options ad(s)WillPlayMuted and ad(s)WillAutoPlay.
Fixes #341.

* Update README to indicate that setAdWillPlayMuted is deprecated.

* Use getPlayerOptions() instead of vjsPlayer.options_ in controller getAdsWillAutoplay.

* Add can-autoplay to release script for gh-pages.

* Move can-autoplay from devDependencies to dependencies. I feel like if it's required to run the samples then it should probably be in dependencies.

* Fix lint errors.

* Move accidental extra file.

* Fix example - check unmuted support first, then muted.

.eslintrc.js

@@ -10,6 +10,9 @@ module.exports = {
     'rules': {
         'jsdoc/check-types': 'error',
         'space-infix-ops': 'error',
+        'no-console': ['error', {
+          'allow': ['warn', 'error']
+        }],
     },
     'plugins': [
       'jsdoc',

README.md

@@ -91,7 +91,7 @@ the previous snippet. A summary of all settings follows:
 | adLabel                | string       | Replaces the "Advertisement" text in the ad label. Added for multilingual UI support. |
 | adsRenderingSettings   | object       | JSON object with ads rendering settings as defined in the IMA SDK,Docs(1). |
 | autoPlayAdBreaks       | boolean      | Whether or not to automatically play VMAP or ad rules ad breaks. Defaults,to true. |
-| adWillPlayMuted        | boolean      | Notifies the SDK whether the player intends to start ad while muted. Changing this setting will have no impact on ad playback. Defaults,to false. |
+| **deprecated** adWillPlayMuted        | boolean      | Notifies the SDK whether the player intends to start ad while muted. Changing this setting will have no impact on ad playback. Defaults,to false. |
 | contribAdsSettings     | object       | Additional settings to be passed to the contrib-ads plugin(2), used by,this IMA plugin. |
 | debug                  | boolean      | True to load the debug version of the plugin, false to load the non-debug version.,Defaults to false. |
 | disableFlashAds        | boolean      | True to disable Flash ads - Flash ads will be considered an unsupported ad type. Defaults to false. |

examples/autoplay/ads.js

@@ -14,24 +14,62 @@
  * limitations under the License.
  */
 
-var player = videojs('content_video');
-
-var options = {
-  id: 'content_video',
-  adTagUrl: 'http://pubads.g.doubleclick.net/gampad/ads?sz=640x480&' +
-      'iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&' +
-      'impl=s&gdfp_req=1&env=vp&output=xml_vmap1&unviewed_position_start=1&' +
-      'cust_params=sample_ar%3Dpremidpostpod%26deployment%3Dgmf-js&cmsid=496&' +
-      'vid=short_onecue&correlator='
-};
-
-player.ima(options);
-
-// Remove controls from the player on iPad to stop native controls from stealing
-// our click
-var contentPlayer =  document.getElementById('content_video_html5_api');
-if ((navigator.userAgent.match(/iPad/i) ||
-      navigator.userAgent.match(/Android/i)) &&
-    contentPlayer.hasAttribute('controls')) {
-  contentPlayer.removeAttribute('controls');
+
+
+var autoplayAllowed = false;
+var autoplayRequiresMute = false;
+
+function checkUnmutedAutoplaySupport() {
+  canAutoplay
+    .video({timeout: 100, muted: false})
+    .then(({result, error}) => {
+        if(result === false) {
+          // Unmuted autoplay is not allowed.
+          checkMutedAutoplaySupport();
+        } else {
+          // Unmuted autoplay is allowed.
+          autoplayAllowed = true;
+          autoplayRequiresMute = false;
+          initPlayer();
+        }
+    })
+}
+
+function checkMutedAutoplaySupport() {
+  canAutoplay
+    .video({timeout: 100, muted: true})
+    .then(({result, error}) => {
+        if(result === false) {
+          // Muted autoplay is not allowed.
+          autoplayAllowed = false;
+          autoplayRequiresMute = false;
+        } else {
+          // Muted autoplay is allowed.
+          autoplayAllowed = true;
+          autoplayRequiresMute = true;
+        }
+        initPlayer();
+    })
 }
+
+function initPlayer() {
+  var vjsOptions = {
+    autoplay: autoplayAllowed,
+    muted: autoplayRequiresMute,
+    debug: true
+  }
+  var player = videojs('content_video', vjsOptions);
+
+  var imaOptions = {
+    id: 'content_video',
+    adTagUrl: 'http://pubads.g.doubleclick.net/gampad/ads?sz=640x480&' +
+        'iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&' +
+        'impl=s&gdfp_req=1&env=vp&output=xml_vmap1&unviewed_position_start=1&' +
+        'cust_params=sample_ar%3Dpremidpostpod%26deployment%3Dgmf-js' +
+        '&cmsid=496&vid=short_onecue&correlator='
+
+  };
+  player.ima(imaOptions);
+}
+
+checkUnmutedAutoplaySupport();

examples/autoplay/index.html

@@ -26,14 +26,15 @@
   <body>
     <video id="content_video" class="video-js vjs-default-skin"
         poster = "../posters/bbb_poster.jpg" controls preload="auto" width="640"
-        height="360" autoplay muted playsinline>
+        height="360" playsinline>
       <source src="//commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
           type="video/mp4" ></source>
     </video>
     <script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
     <script src="../../node_modules/video.js/dist/video.min.js"></script>
     <script src="../../node_modules/videojs-contrib-ads/dist/videojs.ads.min.js"></script>
     <script src="../../dist/videojs.ima.js"></script>
+    <script src="../../node_modules/can-autoplay/build/can-autoplay.min.js"></script>
     <script src="ads.js"></script>
   </body>
 </html>