android-media-autoplay.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../polymer/polymer.html">

<!--
Workaround for https://crbug.com/178297 (HTMLMediaElement.play() can only be
initiated by a user gesture on Android). Attaches a capturing event listener to
document that calls play() with an empty src. This allows to future play()
calls without direct user interaction.


Example:

    <audio is="android-audio-autoplay" src="beep.ogg"></audio>
    <video is="android-video-autoplay" src="foo.webm"></audio>

    <script>
      // Works outside of user-interaction event handlers if there was some
      // user-interaction with the page first.
      document.querySelector('audio').play();
      document.querySelector('video').play();
    </script>

@demo demo/index.html
-->

<dom-module id="android-media-autoplay">
<template>
<style>
  :host {
    display: none;
  }
</style>

</template>

<script>
  (function() {
    var _AndroidMediaAutoplayBehavior = {
      attached: function() {
        this._androidVideoAutoplayListener = this._onAndroidVideoAutoplayTap.bind(this);
        document.addEventListener('touchstart', this._androidVideoAutoplayListener, true);
      },

      detached: function() {
        this._removeListener();
      },

      _removeListener: function() {
        document.removeEventListener('touchstart', this._androidVideoAutoplayListener, true);
        delete this._androidVideoAutoplayListener;
      },

      /**
      * First tap anywhere on the page.
      */
      _onAndroidVideoAutoplayTap: function() {
        var oldUrl = this.src;
        this.src = '';
        this.play();
        this.src = oldUrl;
        this._removeListener();
      }
    };
    Polymer({
      is: 'android-video-autoplay',
      extends: 'video',
      behaviors: [_AndroidMediaAutoplayBehavior]
    });

    Polymer({
      is: 'android-audio-autoplay',
      extends: 'audio',
      behaviors: [_AndroidMediaAutoplayBehavior]
    });
  })();
</script>
</dom-module>