YouTube iframe播放器不会在android 4.x WebView中显示视频 [英] Youtube iframe player won't show videos in android 4.x WebView

问题描述

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

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

这是我设置WebView的方法:

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">

这是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中起作用吗? 谢谢.

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

推荐答案

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

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:

• 在Android 4版本中，无法自动播放.用户必须将播放按钮按入iframe中才能开始播放视频.特别是:

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

• 在Android 4.1中，它再现音频，但不再现图像.
• 在Android 4.3中，我在可以再现音频但没有视频的设备和不能再现任何东西的设备中进行了测试.
• 在Android 4.4中不要复制任何内容

从Android 5和更高版本开始，一切正常.

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 :)

这篇关于YouTube iframe播放器不会在android 4.x WebView中显示视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！