I'm in the stage of planning a new application for both iOS and Android platforms (tablet and phone), which will heavily feature streaming video playback.
However, the documentation is not entirely clear about capabilities of these platforms when it comes to video playback. So my questions are:
1.) Can Android and iOS playback HTML5 video from a webpage/webview?
2.) Can HTML5 videos be shown as part of a webpage (non-fullscreen) with an overlay?
3.) Can Android and iOS play videos natively in non-fullscreen mode?
4.) Can I do text/graphcs overlay over a played video if it's a part of native app?
The answers on these questions (if possible, with supported OS versions) would be much appreciated, I can't seem to find conclusive resouces as part of the platform documentation.
Ok let me try to answer as clear as possible since I just had experience with apps for streaming in ios and android.
1.) Can Android and iOS playback HTML5 video from a webpage/webview?
Yes The both can with the <Video> tag
2.) Can HTML5 videos be shown as part of a webpage (non-fullscreen) with an overlay?
This depends more on the device than on the OS. iPad can do it without full-screen but iPhone does apply full-screen, Android Tablets Can some Andorid phones Can't.
Specifically on iOS and iPhones the best way to go would be to create a MPMoviePlayerController (not to be confused with MPMoviewPlayerViewController) and you can set the layout in your viewController and restrict the size of the video so you can see the layout. (This allso works of course in iPad so that could be your best approach for both)
3.) Can Android and iOS play videos natively in non-fullscreen mode?
Yes they can, as explained above would be better if instead of using a WebView you use VideoPlayer's in View Controllers
4.) Can I do text/graphcs overlay over a played video if it's a part of native app?
You can using the above approach since your video will be on your viewcontroller where you manage the size and position of the player in your view, when doing it on a webviewthe device automatically loads the player so you are unable to manage it.
You should play safe and go for min OS requirements iOS 4.0 and Android OS 2.1 because of the improvements both versions made on native video playback
I don't think there can be a definitive answer without testing and even then the answers are likely to change (rapidly, I hope). I looked at the reference video here: http://broken-links.com/tests/video/ which is encoded in three different forms, ensuring it can play correctly in Firefox, which supports ogg, Chrome, which supports webm, and whatever supports m4v.
<video id="video" autobuffer height="240" poster="../images/bbb_poster-360x240.jpg" width="360">
<source src="../media/BigBuck.m4v">
<source src="../media/BigBuck.webm" type="video/webm">
<source src="../media/BigBuck.theora.ogv" type="video/ogg">
</video>
I tested this on an iPad 2 with the latest updates, a Samsung Galaxy Tab with Android 3.1, and a Nexus One with Android 2.3 as well as Firefox 5 and Chrome 12 on OS X 10.6.8. Both Firefox and Chrome played perfectly.
Ipad 2: Played correctly in the browser (non-fullscreen). The only anomaly: time was shown as "1' of NaN'"
Android 3.1: Played correctly in the browser (non-fullscreen.)
Android 2.3: Went to full-screen when I pressed "play." After playing, went back to in-browser, but showed time as "1' of 6000'" Also, it hung for a while before playing, perhaps because of the connection speed, but it didn't feel completely stable.
I hope this is helpful.
Related
I am trying to integrate an HTML 5 video player with It's auto-play attribute on my site. It is working fine on Web and other devices but it is not working with any android device which has 4.0 and above OS. I have seen this Link.But I am looking if there is any workaround for this issue.
Note:I have also tried implementing jwplayer but later on I found that it doesn't support the autoplay for android and ios devices.
PS : I have tried to put an image on top of video and clicking on that should trigger an autoplay but still no success.
The only approach I know of is to provide a user interaction before the video begins to play like a 'touch to enter site' button, then on that event play the video. Playing video or audio in HTML5 requires user interaction on Android and iOS. It is by design - no workaround as of today is available. You can read here for confirmation.
You can read here for the whys and hows on iOS (which is the same info as on your Google link).
In my project, I need to autoplay HTML5 video in browser when page is loaded.
I have tried a several javascript solutions but none of them works.
I read that android browser is blocking autoplay due to protect from downloading a lot of data.
Can be this blocking feature turned off in browser/chrome/operation system settings ?
I cannot find any working solution how to enable autoplay. I have searched over plenty of stackoverflow posts and many other sites ...
By the way, I am using android 4.1.1.
Short answer: No.
Longer answer: We are looking at it, but the reason it is turned off by default is that we are really concerned about the battery and bandwidth on a users mobile device that we would rather require the user to perform a gesture.
In Chrome this seems to be working now, anno 2017: HTML5 videos play automatically in Chrome (59) on Android (7.1.1).
Note that the videos start muted. You can enable autoplay with sound on Android Chrome by navigating to chrome://flags and set gesture requirement for media playback to disabled (per this answer).
(Note that unfortunately disabling this flag seems to have no impact on an embedded YouTube video. I have openened a new question for this.)
add "muted" attribute in video tag like;
<video autoplay muted>
...
</video>
it will work. Google chrome doesn't autoplay the videos with sound. So, you will need to mute it.
First, I've looked at this question, but it's a few years old and support for these things might have changed.
I'm developing an HTML5 app for Android using an IDE (HTML5 Builder) that allows to export the HTML5 app to an Android APK. I'm doing that and everything works fine except the video and audio files.
In that app I have one video in mp4 format, and a few audios in mp3 format. When I run that app as a web-app in the internet browser of a desktop and in an Android device the video and the audios work perfectly. However, when I export that app as an APK and install it in an Android device, everything works fine (navigation, css, images, etc) except the video and the audios.
Is it a problem of the format? I've been doing some research and it seems that mp4 and mp3 should be accepted... Besides, I've followed this method to encode the video as explained in this article (which is the same method explained in the question I mention above) but still the video doesn't work.
Any help with this would be appreciated!
First I will state that with me I've experienced a hit or miss with mobile devices. Some mobile devices will work fine with my code other times they wont work at all when using audio or video. I know the following works with iPhone, and supports my primary android device but not all android devices.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogv" type="video/ogg">
<source src="movie.webm" type="video/webm">
</video>
I recomend making the same video files for all 3 formats, this way if a device doesn't support one format but supports another you'll be in luck. The same is for audio but you use the audio tags.
I would recomend installing the following Android Apps on your device to see if your device supports all of the HTML5 features. https://play.google.com/store/apps/details?id=com.mds.phonegapapijqm and https://play.google.com/store/apps/details?id=com.phonegap.phonegapdeveloper
I know you said you weren't using phonegap but still those apps are very handy for testing HTML apps for android in general.
I am doing an android app which shows my website in the webview. My website contains a flash player for playing movie.
Here is the link which contains the flash player and I want to display on the webview.
After reading many articles, I have tried the following code:
webview2.getSettings().setPluginsEnabled(true);
webview2.getSettings().setPluginState(PluginState.ON);
webview2.getSettings().setJavaScriptEnabled(true);
webview2.getSettings().setAllowFileAccess(true);
But it is still not working.
This may sound very simple, but make sure the platform you're testing this on has the Flash Player installed.
Many android phones do not have flash player in their browsers anymore, and there isnt a flash player plugin for the WebView object.
Your best chance would be to make this video in your page viewed with html5 video tags, or let people view your website in their own browser, which may or may not work (some browsers have flash, some dont)
I'm developing a mobile video platform and I have playing in mobile safari and some Android browsers. The problem I'm having is that my solutions thus far (have tried regular HTML 5 video as well as VideoJS) have only worked on about 50% of the Android browsers I've tested.
I have added the three web formats to my video tag (ogv, webm and mp4) as well as provided a fallback flash object but it seems that a lot of the Android mobile browsers still refuse to play any video.
Has anyone had a similar experience that could propose a solution?
Thanks,
gearoid.
Strange resolution with this one. I need to add the video sources in the appropriate order to get multi-device compatability. The sources need to be added to the video tag in the following order:
MP4
WebM
OGV