javascript - YouTube IFrame API play method doesn't work before touch on some Android tablets

Question

We're developing a YouTube player and are using the IFrame API. Everything works really nice except on our Android 4.2.2 test devices.

Only on those devices (and not on any other version of Android), it is necessary to "manually" start the video by touching the video view. On all other devices, we can programatically start the video playing using the YouTube method.

Once the video has been started in this way, the YouTube API works as expected (i.e. play, pause, stop methods all work programatically as expected).

Here's the essence of our code:

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'C0DPdy98e4c',
    playerVars: {
      controls: 0,
      showinfo: 0,
      modestbranding: 1
    }
  });
}

function playVideo() {
  player.playVideo();
}

If we attempt to programatically play the video before a user has "manually" started the video (on Android 4.2.2 devices), the video begins buffering and then fails. Upon failure, the video view goes black and displays a distinct pattern, seen in the top left of the video view in image here:

Has any anyone else experienced this issue? Does anyone have any suggestions about what to do about it?

Answer 1

This is a known problem for which you have two possible solutions:

1) If you can target APi >= 17 you can rely on the new WebView and the new WebSettings api method setMediaPlaybackRequiresUserGesture()

WebSettings settings = webview.getSettings();
settings.setMediaPlaybackRequiresUserGesture(false);

2) If your target api is < 17 than you have to simulate an user's tap on the WebView at the right time (like after the page is loaded and before sending the play command):

private void emulateClick(final WebView webview) {
    long delta = 100;
    long downTime = SystemClock.uptimeMillis();
    float x = webview.getLeft() + webview.getWidth()/2; //in the middle of the webview
    float y = webview.getTop() + webview.getHeight()/2;

    final MotionEvent motionEvent = MotionEvent.obtain( downTime, downTime + delta, MotionEvent.ACTION_DOWN, x, y, 0 );
    final MotionEvent motionEvent2 = MotionEvent.obtain( downTime + delta + 1, downTime + delta * 2, MotionEvent.ACTION_UP, x, y, 0 );

    Runnable tapdown = new Runnable() {
        @Override
        public void run() {
            if (webview != null) {
                webview.dispatchTouchEvent(motionEvent);
            }
        }
    };

    Runnable tapup = new Runnable() {
        @Override
        public void run() {
            if (webview != null) {
                webview.dispatchTouchEvent(motionEvent2);
            }
        }
    };

    int toWait = 0;
    int delay = 100;
    webview.postDelayed(tapdown, delay);
    delay += 100;
    webview.postDelayed(tapup, delay);
}