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 ?
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
Related
What's the best way to detect if a browser supports autoplay of embedded media files?
Using the youtube javascript API, on iOS (and possibly Android) devices, if you call playVideo() prior to the user tapping on the video, the video is put in a bad state and is basically useless. You might do this when you want to autoplay the video after the page loads, or you might have your own play/pause button.
There are lots of discussions on how to get autoplay to work (see below), but another way to deal with this is to detect when it shouldn't be called. The obvious answer would be to detect a specific device or OS using the user agent string, but I'm wondering if there's a better way to do it.
Related posts:
YouTube iFrame API hangs in buffering state after the playVideo() command on iPad
Can you autoplay HTML5 videos on the iPad?
Autoplay an Audio File on Mobile Safari
How can I autoplay media in iOS >= 4.2.1 Mobile Safari?
Quite simple, I have a <video> tag as follows:
<video id="video" controls preload>
<source src="media/video.mp4" type="video/mp4">
<source src="media/video.webm" type="video/webm">
<source src="media/video.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
Fairly standard. However, I'd like the video to open up on mobile devices using the built-in media player, essentially like watching a YouTube video from Safari on an iPhone.
How could I achieve this? The mobile site is built using jQuery Mobile.
Also, I think I read somewhere that removing the type attribute from the <source> tag increases compatibility. Is this true?
Update:
If you are trying to play the video file from an Hybrid android application, then below code should be of use for you. To play HTML5 videos in Android Native player here's a small piece of Java code to use -
Intent intent = new Intent(android.content.Intent.ACTION_VIEW);
Uri data = Uri.parse(“path of the video file”); //Specify the video file path
intent.setDataAndType(data,“video/mp4″);
startActivity(intent);
Now invoke the above Java native code using your JavaScript function passing the video element or path shown above and you should be good with your player.
To answer your second question, i think that removing type attribute doesn't increase the video compatibility in mobile phones as its a mandatory attribute to be set for the native player to know the encoding of the video file.
Video.js is compatible across most browsers but you have to set the viewports etc for mobile browsers.
This tutorial could probably help you out a little more.
You could try using the emerging HTML5 Fullscreen API to do this. It looks supported in iOS5+ and Android 4.0+
Take a look at this tutorial or read the full spec.
And I've not heard of any benefit to removing the type attribute. Taking that out would likely cause problems.
I have Wowza and testing RTMP streaming. Now as in Wowza RTMP Example, i can now:
Playback via Flash
http://www.wowza.com/gettingstarted
Server: rtmp://xx.xx.xx.xx:1935/live
Stream: myStream
Playback via HTML5 for iOS
<video x-webkit-airplay="allow" type="video/m3u8" src="http://xx.xx.xx.xx:1935/live/myStream/playlist.m3u8" />
So means, til now, i can playback via:
Flash (I DON'T WANT IT IN THE END)
iOS HTML5
So how to make it to play on:
HTML5 for non iOS Browsers?
For iOS on HTML5:
<video x-webkit-airplay="allow" type="video/m3u8" src="http://xx.xx.xx.xx:1935/live/myStream/playlist.m3u8" />
HTML5 for Android or Windows or Any other Browsers?
The HTML 5 live streaming that you are using on iPhone is often referred to as "HLS". Currently most browsers on desktop do not support HLS via the HTML 5 video tag.
However, using Wowza, you can get your live stream onto basically any screen with a little effort.
iOS:
You're covered there. HLS live streaming from Wowza to iOS devices works like a charm.
Desktop:
Unfortunately, when it comes to desktop browsers you are still limited to using flash for live streams. You can do so in one of two ways:
With a typical flash media player, such as JWPlayer using the tried and true RTMP method, as you described.
Using a flash media player that supports HLS streams (such as JWPlayer). In this case, you would use the same endpoint that you're using for iOS streams. I've been running live streams this way in flash on desktop. For my money, I prefer to use HLS for desktop, as I am only dealing with one protocol for live streams on all devices at the end of the day. I have also found the performance to be quite good.
You can read about HLS support in JWPlayer here:
http://support.jwplayer.com/customer/portal/articles/1430189-about-hls-streaming
Do note that HLS support in JWPlayer is limited to their enterprise edition.
All that said, I would really recommend checking out JWPlayer. In my opinion, nothing makes it easier to get your live streams running on all devices.
Android:
Although Android does not technically support HLS, I have found that on a number of Android devices, including Galaxy S4, and HTC One, using an HLS stream in a video tag works just like on iOS. Since everything I've read indicates that HLS is not supported on Android, I can only assume that this functionality is added by the individual manufacturers. Alternatively, you present Android users with a link to the rtsp stream that is generated by Wowza in it's default application configuration. On most other Android devices, the rtsp stream can be opened with the device's native media player. A full history and workarounds regarding live streaming on Android can be found here:
http://www.jwplayer.com/blog/the-pain-of-live-streaming-on-android/
I'll wrap up by saying that although live streaming to mulitple devices has gotten much easier even in the last year, there is still a butt load fragmentation that can make a developer looking to implement a solution pull his hair out. Furthermore, although most would agree that the HTML 5 video specification is the future, that spec is still widely debated, and not really "done" yet. Jeroen Wijering keeps a running article on the subject that is updated regularly and is, in my opinion, required reading for anyone dealing with video in web applications. I would read it thoroughly, and check back frequently for updates as you continue to develop video solutions for the web:
http://www.jwplayer.com/html5/
Update:
JWPlayer now officially supports HLS on Android 4.1+ (Jellybean):
http://support.jwplayer.com/customer/portal/articles/1430189-about-hls-streaming
Flowplayer can provide a solution for that. Android & iOS browsers can play HLS stream. There is a simple script as below. Check it out
<html>
<head>
<title>My Flowplayer video</title>
<link rel="stylesheet"
href="https://releases.flowplayer.org/7.2.7/skin/skin.css">
<!-- hls.js -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/0.10.1/hls.light.min.js"></script>
<!-- flowplayer -->
<script src="https://releases.flowplayer.org/7.2.7/flowplayer.min.js"> </script>
</head>
<body>
<div class=”flowplayer” data-rtmp=”rtmp://127.0.0.1/vod”>
<video>
<source type=”video/flash” src=”mp4:vod_test”>
<source type=”application/x-mpegurl” src=”streams/vod_test.m3u8″>
</video>
</div>
</body>
</html>
How to Play Live and Vod Stream on all Browsers
I have a bit of problem with streaming hls using video tag.
Originally I'm using flowplayer with the fallback flowplayer.ipad.js, it actually just generate video for using on fail to use flash (such as ipad).
ANW i see that it's use video tag for those device (i'm using it for android device too).
Simply said, this code actually can run on android:
<video id="testchoi" width="320" height="240" controls preload>
<source src="some_hls_stream_here.m3u8"/>
</video>
add type='application/vnd.apple.mpegurl' and it can run on ipad.
But put that aside, I want to asking that in android, if you change size while playing, it will get error. More specify, playing it and then go for fullscreen.
I think there's problem because google do not much support for hls (since it's apple standard ANW). Is there anyway to work around?
I'm trying to do something like:
beforeEnterFullscreen => stop video => enterFullscreen => reLoad video => play video. Any help in this too, I can't add the eventListener for fullscreen event
Found out the event for full screen in those device.
player.addEventListener('webkitbeginfullscreen', function(){
this.load();
this.play();
}, false);
player.addEventListener('webkitendfullscreen', function(){
this.load();
this.play();
}, false);
Last time i tried with webkitenterfullscreen, it's no use in mobile device.
And until now, i can just come up with above work around.
I'm Making a Mobile website using jquery mobile and I'm only considering iPad, iPhone and Android device. I don't need Flash Fallback.
Then what is the best method to make video player only for mobile? Do i have to use any of these http://praegnanz.de/html5video/ or only html 5 video code will do. I don't need custom skin. Main thing is video should be smoothly played on iPad, iphone and Android.
You don't necessarily have to use one of those video libraries; you can use the HTML5 video element which allows you to style the controls via CSS and specify fallbacks (including flash and silverlight).
The main thing to consider will be what video codecs each mobile browser on iphone, ipad and android supports.
In between the tags, you can specify multiple video formats to fallback on.
I tested this on iphone and ipad and it could play the video using the HTML5 video element:
<video width="320" height="240" controls="controls">
<source src="http://blip.tv/file/get/Qtv-CarrieFisherTalksStarWarsOnQ553.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
iOS will support mp4 but i'm not an Android expert so i found this post that details encoding video that will play on Android via the html5 video element: Encoding Video For Android