Youtube iframe player won't show videos in android 4.x WebView

Question

I'm trying to use the youtube iframe player inside an android WebView but it fails on android 4.x while on 5.x everything works great.
When I try it in 4.x the player loads the video, when I start it I see nothing but hear the video sound. The logcat gets filled with chromium error messages over and over again:

E/chromium(20362): [ERROR:gles2_cmd_decoder.cc(5942)] [.Compositor-Onscreen-0x5db83bb8]GL ERROR :GL_INVALID_OPERATION : glUseProgram: program not linked
E/chromium(20362): [ERROR:gles2_cmd_decoder.cc(5718)] [.Compositor-Onscreen-0x5db83bb8]GL ERROR :GL_INVALID_OPERATION : glUniformMatrix4fv: wrong uniform function for type
E/chromium(20362): [ERROR:gles2_cmd_decoder.cc(5718)] [.Compositor-Onscreen-0x5db83bb8]GL ERROR :GL_INVALID_OPERATION : glUniform1iv: wrong uniform function for type

Here's how I set the WebView:

this.webview = (WebView) this.findViewById(R.id.webview);

WebSettings settings = this.webview.getSettings();
settings.setJavaScriptEnabled(true);
settings.setAppCacheEnabled(false);

this.webview.setWebChromeClient(new WebChromeClient());
...
this.webview.loadUrl(ADDRESS_OF_PAGE);

Also, I enable hardware acceleration in the manifest:

<application
    ...
    android:hardwareAccelerated="true">

Here's the js part:

var player;
var VIDEO_ID = "EIsauUFIguE";

window.onYouTubeIframeAPIReady = function() {
    console.log("youtube api ready, loading player");

    player = new YT.Player("playerIframe", {
        width: "100%",
        height: "100%",
        videoId: null,
        events: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange,
            onPlaybackQualityChange: onPlayerPlaybackQualityChange,
            onError: onPlayerError
        },
        playerVars: {
            modestbranding: 1,
            playsinline: 1,
            fs: 0,
            showinfo: 0
        }
    });
}

function onPlayerReady(event) {
    console.log("player is ready: ", event);
    playVideo();
}

function onPlayerStateChange(event) {
    console.log("player state change: ", event);
}

function onPlayerPlaybackQualityChange(event) {
    console.log("player playback quality change: ", event);
}

function onPlayerError(event) {
    console.log("player error: ", event);
}

function playVideo() {
    console.log("playing video: " + VIDEO_ID);
    player.loadVideoById(VIDEO_ID);
    player.setPlaybackQuality("medium");
}

function loadPlayer() {
    console.log("loading youtube api");

    var tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

loadPlayer();

Any idea why it behaves this way and only in android 4.x? Thanks.

Answer 1

I had the same problem, but after fighting with this long time, i didn't find a solution. I tested all the configurations with webview and did many different html changes to put the iframe.

After my researching i only can add:

• In Android 4 versions, can't autoplay. The user has to press play button into the iframe to start play the video. Particularly:

  • In Android 4.1 it reproduces the audio but not the image.
  • In Android 4.3 i tested in devices which can reproduce audio but no video and devices that can't reproduce anything.
  • In Android 4.4 don't reproduce anything

• From Android 5 and + everything works fine.

Good luck and I plus vote this question to know if anyone can put light into this question :)