Youtube iframe 播放器不会在 android 4.x WebView 中显示视频答案

【问题标题】：Youtube iframe player won't show videos in android 4.x WebViewYoutube iframe 播放器不会在 android 4.x WebView 中显示视频
【发布时间】：2015-10-13 23:22:39
【问题描述】：

我正在尝试在 android WebView 中使用 youtube iframe 播放器，但它在 android 4.x 上失败，而在 5.x 上一切正常。
当我在 4.x 中尝试它时，播放器会加载视频，当我启动它时，我什么也看不到，只听到视频声音。 logcat 一遍又一遍地被 chromium 错误消息填满：

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

这是我设置 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);

另外，我在清单中启用了硬件加速：

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

这里是js部分：

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();

知道为什么它只有在 android 4.x 中才会这样吗？谢谢。

【问题讨论】：

标签： android webview youtube chromium youtube-javascript-api

【解决方案1】：

我也遇到了同样的问题，但是经过这么长时间的斗争，我没有找到解决方案。我用 webview 测试了所有配置，并做了许多不同的 html 更改来放置 iframe。

经过我的研究，我只能添加：

在 Android 4 版本中，无法自动播放。用户必须在 iframe 中按下播放按钮才能开始播放视频。特别是：
- 在 Android 4.1 中，它会再现音频，但不会再现图像。
- 在 Android 4.3 中，我在可以再现音频但无法再现视频的设备和无法再现任何内容的设备上进行了测试。
- 在 Android 4.4 中不要复制任何内容
从 Android 5 和 + 一切正常。

祝你好运，我还要投票给这个问题，以了解是否有人可以解决这个问题:)

【讨论】：