HTML5 BrightCove 视频偶尔可在 Android 上运行

Question

我遇到了这样一个问题，即嵌入我网站的 Brightcove HTML5 视频在点击播放后显示空白黑屏。视频只会偶尔播放。这只发生在 Android 设备上（我只是在 KitKat 上进行 QA）。

在非工作实例中，templateLoad 和 templateReady 事件会触发，但 MediaEvents 不会触发，视频也不会播放，只是显示黑屏。

在工作实例中，所有事件都被触发，视频和音频流完美。

我什至在 BrightCove 的 SmartPlayer 支持页面上也遇到过同样的问题。视频功能偶尔会出现。

想知道其他人是否在 Android WebView 中看到了这个问题，或者这可能是我们的呈现设置的问题。

代码如下。

<object id="myExperience{{ event.trailer.video_id }}" class="BrightcoveExperience">
    <param name="bgcolor" value="#FFFFFF" />
    <param name="width" value="530" />
    <param name="height" value="298" />
    <param name="playerID" value="3639386511001" />
    <param name="playerKey" value="xxx" />
    <param name="isVid" value="true" />
    <param name="wmode" value="transparent" />
    <param name="isUI" value="true" />
    <param name="dynamicStreaming" value="true" />
    <param name="includeAPI" value="true" />
    <param name="templateLoadHandler" value="onTemplateLoad" />
    <param name="templateReadyHandler" value="onTemplateReady" />
    <param name="templateErrorHandler" value="onPlayerError" />
    <param name="@videoPlayer" value="xxx" />
</object>

 (function(){
        var player,
            APIModules,
            videoPlayer,
            experienceModule;
        return {
            onTemplateLoad : function (experienceID) {
                player = brightcove.api.getExperience(experienceID);
                APIModules = brightcove.api.modules.APIModules;
                console.log('template loaded');
            },
            onTemplateReady : function (evt) {
                videoPlayer = player.getModule(APIModules.VIDEO_PLAYER);
                experienceModule = player.getModule(APIModules.EXPERIENCE);
                videoPlayer.addEventListener(brightcove.api.events.MediaEvent.BEGIN, onMediaEventFired);
                console.log('template ready');
            },
            onMediaEventFired : function (evt){
                console.log('begin event fired')
            }
        }
    }());

Answer 1

默认的 webview 不适合播放 HTML5 视频。即使是纯 HTML5 视频元素，我也遇到过“随机”播放问题——它不仅限于 Brightcove 的播放器。本质上，标准的 webview 浏览器不足以支持视频。 http://developer.android.com/reference/android/webkit/WebView.html 的“HTML5 视频支持”部分掩盖了所需的配置。

为了在您的应用程序中支持内联 HTML5 视频，您需要开启硬件加速，并设置 WebChromeClient。对于全屏支持，需要实现 onShowCustomView(View, WebChromeClient.CustomViewCallback) 和 onHideCustomView()，getVideoLoadingProgressView() 是可选的。

我已经成功地将 this custom webview 与 Brightcove 播放器和其他视频一起使用。