I made a static website tool that runs in all major browsers and iPad and Android(chrome). I show .mp4 video source with a simple embed tag. This was working just dandy until sometime this weekend. Come monday testing the video in android chrome, it plays audio only when not full screen, and plays correctly when full screen. I tested with the html5 video tag I use in other tools and actually same bug. I converted the video to other formats and codec, same bug. I tested tools that were completed months ago and working perfectly when sold, same bug. Seems likely that it started when chrome updated sometime after the 10/11 over the weekend. But as this project is on the home stretch and I had just debugged the last bugs I am putting it out there hoping for some feedback. I can't be the only one as it is happening with the video tag as well as the embed tag. It has to be chrome that changed my code didn't. Any insights out there?
Related
I am adding an iframe to display a video from youtube, the video appears fine and responsive across all devices except on android mobile chrome browser.The video appears for a second then disappears. On inspecting the element in chrome developer tools I can actually see that the Div that contains my iframe becomes empty after a second.
I have tried putting it in the flex video container provided by foundation (the site is using zurb foundation for responsive design) but still the issue persists, in fact no iframe video container is staying for more than a second. Any help is highly appreciated.
I have red these questions, but none of them solve my issue
AngularJS: Embedding Youtube videos in iframe does not work on Android Chrome
youtube video quickly disappears
Why is my iframe video disappearing?
I dont have rights yet to post an image so i am sharing the snapshot here.
http://i61.tinypic.com/vfwjnk.png
The fullscreen-video-container in the class of the div which holds the iframe. You can see the div becomes empty after a second.
The console has no errors
This was the first post I found on the topic. Ran into this just the other day. I had the embed URL variant so I was confused. This is all very simple. Realized it was a WordPress plugin trying to do tricky things with regex and handling it's own embed trickery. Disabling the related plugin made things work.
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).
When i run my application on the tablet(android) and hit the pause button it pauses the screen of the video but the video will jump a head how ever many seconds the pause when i un-pause the video. So if i start the video and then click pause and walk away i can come back and un-pause the video and it well jump right to the end.
The code i am using is ns.togglePause(); This same code works on the desktop and works with .flv and .f4v but will not work when i am using a mp4 on the tablet.
Has anyone seen this before or know why it would do something like this?
i am using flashdevelop to debug the application.
I found out that my problem is caused by encoding. This helped me solve my problem.I found this on adobes forms.
Video encoding is very important.
For example, use baseline profile level 3.1 for H264 for mobile
(and not High profile level 4.1 recommended for desktop).
For more information, see the MAX session of Fabio Sonnati:
"Encoding for Performance on Multiple Devices"
And if you have an Android phone/tablet, there is my AIR application
to watch Adobe MAX 2011 videos :
https://market.android.com/details?id=air.fr.inway.maxVideos2011
Search "Sonnati" for this session's video.
(For info, i use a video player based on OSMF 1.6)
The pdf presentation is available on Sonmati's blog:
http://sonnati.wordpress.com/
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.
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