-
HTML5 Video on the iPad
I’m working on getting a site with video compatible for the iPad here:
https://www.heartlandpokertour.com/index3.phpI seem to have succeeded, but 50% of the time it loads without showing the video controls. All the user sees is a blank, black area. They are still able to click where the play button is and view the video, but they would have to already know it is there.
The other half of the time the controls are displayed.
What would cause such an inconsistency?
Is there another option of displaying an image until the user plays the video, wherein I could direct them to push the button?
Any advice would be greatly appreciated.
-
4 Replies
-
Could it be that your DOCTYPE is for HTML 4.01 Transitional?
*Always share a link to your site and rate the posts. This is a free service for you and for us.
-
hello…
is it only on the ipad that you see this (in other words, only in safari)?
maybe try the page in other html5 compatible browsers and see if you see the same problem – if not, then it could be a bug/issue in safari, which would help you narrow down a search for a solution…
sitruc
-
HTML5 is far from an agreed or finalized specification. https://dev.w3.org/html5/spec/Overview.html The video file formats / codecs have been the source of some controversy. https://en.wikipedia.org/wiki/HTML5_video and https://en.wikipedia.org/wiki/Use_of_Ogg_formats_in_HTML5
Also of use may be
https://developer.apple.com/safari/library/technotes/tn2010/tn2262/index.html -
Could be that the version of iPad you are testing it on doesn’t like the codec of your video. My iPad played the video consistently every time I refreshed the page.
If you want to use an image or other element to play the video you can use some pretty simple javascript to achieve this. The HTML5 video tag accepts the .play() method. I sometimes use onClick=’this.play();’ for some mobile devices. You could have an image overlay the video and use some basic js.
<img src='zzz' onClick"document.getElementById('your_video').play();this.style.display='none';" />
Reply to this Discussion! Login or Sign Up