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).
Related
I'm trying to get my web-app (hiit-fit-training.com) to run inside of an android web view. It works fines visually but has some issues with the sound. . Inside the web app I use a third party TTS service (responsiveVoice) and a simple beep:
var audio = new Audio( '../assets/_sound/beep.mp3' );
audio.play();
The beep has never played in the web-app and the TTS voice worked occasionally in the baconreader android app web-view. They both work perfectly inside of android Chrome. Neither sound sources work in my web-view though..
Although most likely different, pointing the web-view at youtube, I discovered it can play youtubes audio.
Are there any workarounds or suggestions on how to implement my sound effects?
Figured it out by looking through the console and discovered a security setting:
Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture.
It can be solved by using the following setting:
myWebView.getSettings().setMediaPlaybackRequiresUserGesture(false);
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.
Here the short of it.
I'm using an HLS stream with JWPlayer6 for an iOS/Android app I am working on. JWPlayer http://www.longtailvideo.com/ works well and fallbacks to other streaming and player types gracefully. The problem is this, when I want to securely play back audio only in iOS the player is just a condensed black rectangle with a play icon in the middle if I click on the audio it plays fine but it launches the file in quicktime window, and the quicktime player window completely covers the app so you can't listen to the file and continue to use the app.
Is there any possible way to play an audio only stream that utilizes an actually embed-able player instead of the default mechanism of launching audio media types on iOS and Android.
I have already used JPlayer to achieve the functionality I want by placing the js/css player at the bottom of the app in a fixed position so that you can still browse the app while the file is being played, but this is only demo solution for my boss to show him how it would work, but in the end we will need a solution that can securely stream the audio with a player that lets you keep the controls in-app on the page rather than launching quicktime which even after playing the file does not return you to the apps other views.
Any suggestions would be greatly appreciated.
Lol...anyway finally figured out a solution that works for me in my particular case. Since the html side of things for our application resides in a webview on iOS, thanks to phonegap, I was able to do the following.
HTML5 inline video on iPhone vs iPad/Browser
and now the player finally plays inline just like the iPad. I tested this and it works flawlessly. I also tested it without added the obj-c flag in the app code and it does not work. This means the solution I've provided only works if you are packaging you application using html and obj-c like with phonegap or Titanium etc. This is EXACTLY what I was looking for. Now I can use all of jw's awesomeness and still play nice with iOS and give a great user experience to all of our members...thanks for you time and patience. As a side note the inline audio only player even works flawlessly with Android to write of of the box not java code needed to edit anything. Surprised me because I know how HLS is not really all that well supported yet on the Androids.
I am trying to design a video website compatible with Android. A good example of what I'm trying to achieve is vimeo.com. They show a thumbnail of a video. When you tap it, the native Android player comes up in full screen:
Currently, I have an anchor to an FLV containing an h.264 encoded video:
click here to watch
When you tap the anchor on Android, it downloads the video rather than plays it. That's not what I want. How do I get it to play full screen in the native player like Vimeo? But unlike Vimeo, I would like the video to expand so that there's not so much black empty space around the actual video.
Ahh I see what you mean, clicking a Vimeo video opens the Android dialog of selecting which app should respond to that request (in my case just the browser (which downloads the file) or video player (which opens and plays it as you wanted)). This is normal Android behavior- if you have not defined which app should respond to a given request, it will ask you to select from among the supporting applications.
Have you even tried embedding a video in the way suggested through the link I gave you? You may find that it will have the exact effect the Vimeo video does. HTML5 <video> element on Android
EDIT: Actually I think your real problem is probably just that the file format you're using (.flv) is not among the core media formats supported by Android. http://developer.android.com/guide/appendix/media-formats.html
if you have the correct codec installed to play the video and doesn't work, check and make sure you have the correct mime types configured and that something in the registry or a file isn't overwriting.
use the old standard of defining mp4 and falling back to flash.
In mobile Safari and Android webkit there are javascript methods and events defined on the Video object that can help with this. There is another StackOverflow question dealing with this topic (for iPad, but I have used this on Android phones as well).
Web App - iPad webkitEnterFullscreen - Programatically going full-screen video
Mobile Safari documentation: http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html
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.