Reputation: 335
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