LucVH
LucVH

Reputation: 335

streaming hls on Android using mediaelement

I'm trying to use mediaelement.js UI for streaming hls in iPad, iPhone and Android.

The html is a-like as follow (sry I can't public our hls links):

<video src="testinghls.m3u8"></video>

And the script:

$('video').mediaelementplayer({
      // if the <video width> is not specified, this is the default
      defaultVideoWidth: 480,
      // if the <video height> is not specified, this is the default
      defaultVideoHeight: 270,
      // specify to force MediaElement to use a particular video or audio type
      type: 'application/x-mpegURL',
      // the order of controls you want on the control bar (and other plugins below)
      features: ['playpause','progress','volume','fullscreen'],
      // Hide controls when playing and mouse is not over the video
      alwaysShowControls: false,
      // force iPad's native controls
      iPadUseNativeControls: false,
      // force iPhone's native controls
      iPhoneUseNativeControls: false,
      // force Android's native controls
      AndroidUseNativeControls: false
    });

That work fine with iPad and iPhone but fail with Android. It's just somehow detect that the video cannot play and fall back to download link.

Beside I have tried out the pure video tag with hls, it's working fine with or without the type in both iOS and Android devices like the two below:

<video src="{{c.get('hls')}}" type="application/x-mpegURL" style="width:320px;height:185px" controls></video>
<video src="{{c.get('hls')}}" style="width:320px;height:185px" controls></video>

How should I config the Mediaelement to make it work? Or perhaps some tweaks/modifies with the Mediaelement.js ?

Upvotes: 2

Views: 1945

Answers (1)

cjds
cjds

Reputation: 8426

It could be an video encoding issue. Android requires a certain encoding and this is a noted issue in MediaElement.js

A solution to this is suggested in this

Upvotes: 2

Related Questions