I've been working on an iPad-specific site that uses HTML5 video and though I've got video playback working, I can't for the life of me get the poster image to appear. It looks fine on Desktop Safari. Here's the code:
<video src="video/about_the_man.mp4" controls height=360 width=480 poster="video/posters/about_the_man.jpg"></video>
I've using this link as a reference (listing 1.2): https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6
It says that on iOS the poster image will be shown until the user initiates playback, but right now all I'm getting is a black video-sized screen with a big play button in the center. I've looked at other postings on this top (here and here) but neither solution has worked for me. The only thing that's a little bit unconventional about the site is that the video element is in an inline lightbox, so initially on pageload it's not visible, but I don't know why that would make a difference.
I had the exact same problem. I decided to try my code on other iPad's, and it worked fine. The poster image showed up.
After scratching my head for a bit, the solution was to hard reset the iPad and try again. After a reboot, my iPad displayed the poster image as it should.
Maybe it will work for you?
I found there is a limit to the amount of images you can load on an iPad
Here is what it says:
I hit a mobile Safari limitation recently when building an AJAX-y site
on the iPad. If you load a ton of images eventually mobile Safari cuts
you off and will display a [?] instead of the image. After doing some
tests it appears that this limit is around 6.5 MB. Here’s a test page
I made that attempts to load 20 500kb images. When opening this page
on an iPad, 7 of the images don’t appear, even though in Charles they
are returning 200 – success. I’m assuming this is similar to the way
autoplay is disabled for the video tag on iPad/iPhone. Apple probably
wants to make sure users don’t get overloaded with downloads when
browsing on 3G.
Anyhow, 6.5 MB is a hefty load and wouldn’t fare well on 3G, but for one reason or another you may want to work around this limitation. I found the easiest way to patch my code was to load the image into a canvas tag using drawImage(). The canvas tag appears to be immune to the limitation.
Here’s another test page using the canvas tag, all the images should load.
Related
I'm experimenting with different techniques using Amazium here http://stevengeorgeharris.com/croft/croft; when viewing on an iPad the image of the ballet dancer is missing, yet appears on everything else including Nexus 7 and iPhone 5. I have played around with positioning and z-index's but nothing happens.
I then went into IOS simulator to use web inspector and I noticed when I refresh the page the image appears and quickly disappears again. I cannot for the life of me find the cause of the problem, maybe I am over looking something very simple, as I usually do.
Change position:relative to position:absolute for it to show up on iOS.
i just see the website try to add overflow:hidden it will be good in regular explorer but it will not work in iOS but look nice
I am developping a swipe gallery for mobile devices. Users can change images by sliding the screen, as any normal images gallery in most iPhone app.
Here is a demo:
http://daviddarx.com/stuffs/work/custom/swip/
To debug the iOS orientation bug (which let the content zoomed when you change the orientation), I used the only library that correct that:
http://scottjehl.github.com/iOS-Orientationchange-Fix/
Unfortunately, this library is working perfectly most of the time, but it happens to fail and not work correctly. This happen around 1 time on 10 times, and the result is then the same as if the library wasn't here.
This is not a huge problem on most of the mobile and responsive website, as the user can manually dezoom and then get back to the normal display.
But the problem here is that I had to disable the zoom function, to make my system work correctly. So, when the bug happen, once on 10 times, the gallery is then just bugged and stay like that....
So, here are my questions:
-do you know any other library that manage that bug fix, and is 100% completely reliable?
-if not, do you know a way to correct the used library to get a 100% support rate?
-if not, do you have any idea or solution for me?
Thank you in advance for your help!
David
There's an outstanding pull request on Scott Jehl's repo that uses slope detection instead of absolute values which seems to not suffer from the intermittent-ness of the original solution.
https://github.com/PeterWooster/iOS-Orientationchange-Fix/
I'm making a web project that is fitted to the iPad screen. I'm trying to make it look as much like a native app as possible. It is loaded in safari or atomic browser. What I'm trying to find out is if it's possible to eliminate the drag and even the zoom functions of one of those browsers for just that site.
To rephrase, I want to make my site fixed on the screen at all times. The issue is, a user will try to hit a button and it will drag the screen.
PS. An additional question is how I can make it so images don't have the "save as" functionality if held down I tried putting a span over the images, and that worked for firefox, but not iPad safari.
If you can solve any or all of these, you would have my biggest thanks!
Turns out that there are several metatags that you can put in your js file which keep the screen fixed. Good stuff on that is here:
http://jakeboyles.com/2011/01/16/how-to-build-an-iphone-and-ipad-web-app/
As far as the "save as" issue, I don't know yet, that part of my app development hasn't been solved.
Does anyone know if the iPad has any limitations on the canvas tag?
Currently I'm working on a creative that uses a flipbook and audio tag combination to simulate inline video content. The animations are drawn to the canvas element and synced with the audio content being played. There are 4 short video clips that get played when someone clicks on the four buttons below.
http://cs.sandbox.millennialmedia.com/~tkirchner/rich/K/kungfupanda2_test/
The problem I'm having though is in iPad. After playing a few animations, mobile safari just suddenly crashes. It never happens when I play it on my iPhone but it happens every time on the iPad. Its not one particular animation either because if I click a different combination of buttons, the previous clip that it crashed on plays fine, and then it decides to crash on another clip.
I think the problem might have to do with the amount of memory Safari gives individual page views. I found a blog post that explains that problem pretty well.
http://roblaplaca.com/blog/2010/05/05/ipad-safari-image-limit-workaround/
According to that post, once mobile Safari reaches a particular threshold of memory, images begin to return blank. This is consistant with my finds so far. The iPad that I'm testing this all on is running iOS 3.2.1 (and before anyone tells me that I should just explain to my boss that nobody uses 3.X anymore, I tried... they still want me to investigate this). I borrowed a co-workers iPad running iOS 4.2.1 and that device didn't crash, but some of the images weren't being drawn to the canvas.
I'm pretty sure its a problem with the canvas tag too, because I tried experimenting with running the animation without drawing anything to the canvas element, and the page never crashed.
Thats why I think maybe its a limitation with Safari's support of the canvas tag. Of course, I'm open to anybody else's suggestions.
Feels kinda weird answering my own question again, buuuut I figured if anyone did a search on this kind of question, an answer would be helpful.
I believe my original hypothesis was correct. The total amount of images that the aniamtions were using was around 600+. I think the older iPad loaded as many as it could and then when it ran out of cache and the canvas tag was trying to draw images that weren't really there anymore, it crashed.
Eventually we ended up serving the ad to devices with iOS 4.2 and higher, since the problem didn't seem to occur on those newer devices. Plus, we compressed the image sizes further, so that helped reduce the amount of images we were storing into memory.
If anybody knows approximately what the cache threshold in iOS 4.2 or higher browsers are, I'd appreciate it if you commented. Just want to get an idea of how many KB of image data I can safely load.
i'm still working on my html5 videoplayer w/ flashplayer fallback. it is now part of a bigger kind of widget, that encapsulates tabs, sliders, carousels (extensively using jquery)
focussing on the videoplayer: the user can (repeatedly) pick videos to play from a carousel . once a carousel item is clicked, i put a div w/ a fitting background-image over my videoplayer, so as to have a splashimage working the same for every client. that 'selfmade splashimage' and the current frontitem of the carousel (which was just clicked) then are bound to the load() method of the video. obviously there's a lot of stuff happening in between: i check for support of <video> and support of formats (mp4, ogv). i also fade in and out a bunch of stuff. that was a short version of it. and it's all working pretty okay on all the browsers i tested. it IS somewhat working on the ipad as well BUT:::
when i click my splashimage/playbutton ( -> triggering the load() method) the ipad wont play nor load my video RIGHT AWAY. the videoplayer stays black. however, when i click (trigger load()) a few more times, at some point it will start to work as planned.
the ipad works fine on the w3 html5 video events page. so i copied that page for my purpose, replaced a video with one of my videos and it gives me the FAULTY behaviour. so the problem are my videos, aren't they? the videos are currently hosted on a non-streaming server, is that the problem? my knowledge on that subject is really narrow.
sorry for not including any code and talking very general and abstract about the whole thing but i hope it suffices.
EDIT::: problem (kind of) solved. apparently the server the videos were hosted on, was causing the problems -_-
Could it have something to do with this: how to get your HTML5 MP4 video file to play before being fully downloaded as it could be downloading the video, hence the wait.