HTML5 BrightCove video sporadically works on Android

Question

I've come across the issue where the Brightcove HTML5 video that is embedded on my site shows a blank black screen after being clicked to play. Only sporadically will the video play. This only happens on Android Devices (I'm only QA'ing on KitKat).

In the non-working instances, the templateLoad and templateReady events fire but the the MediaEvents do not fire and the video does not play, just shows a black screen.

In the working instance, all the events are fired and the video and audio stream perfectly.

I've even come across this same issue on BrightCove's support pages for the SmartPlayer. The videos function sporadically.

Wondering if others are seeing this issue in the Android WebView or if potentially this is an issue with our rendition settings.

Code is below.

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

misterben misterben · Accepted Answer · 2014-07-23T06:53:53

A default webview isn't great at playing HTML5 video. I've experienced "random" playback issues even with plain HTML5 video elements - it's not limited to Brightcove's player. Essentially a standard webview isn't a capable enough browser to support video. The "HTML5 Video support" section at http://developer.android.com/reference/android/webkit/WebView.html glosses over configuration that's needed.

In order to support inline HTML5 video in your application, you need to have hardware acceleration turned on, and set a WebChromeClient. For full screen support, implementations of onShowCustomView(View, WebChromeClient.CustomViewCallback) and onHideCustomView() are required, getVideoLoadingProgressView() is optional.

I've had success using this custom webview with Brightcove players and other video.

HTML5 BrightCove video sporadically works on Android

1 Answers