HTML 5 Video on the iPad

While developing an HTML 5 video player for the iPad I ran into a few inconvenient quirks. Here’s a rundown of the issues I came across.

There’s no auto-play. If you try to play the HTML5 video player purely in JS without any event tied to it, it won’t work. (UPDATE: There is no working video autoplay attribute, however I just wrote a post about a workaround) Apple mentions why in the Safari Reference Library.

“In Safari on iPhone OS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, autobuffering and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad play event does not.”

After injecting the video tag via javascript you can’t put anything on top of the video. I tried adjusting the z-index and all sorts of hackery, but for the life of me I couldn’t get my custom controls to sit on top of the player unless the player was on the page first. That was really annoying because I had my HTML5 video class all set up to just inject the player into a container. It was all nice and self contained. Since it had to start on the page by default that caused a big mess and I had to do a lot of re-engineering to get it to work. Yuck!

If you do put an element on top of video, the video tag will devour any click events that occur… For example, I placed a play button and an image (“poster”) on top of my video. I wanted the button and poster to disappear when you click the play button. However when I clicked play it’s click event didn’t fire, but the movie did play. If I moved the button off of the video and clicked it, it worked fine. I still have to test if I can preventDefault on the video tag’s click event,  but for now I just did a workaround instead. I moved the video to the left until the user clicks play. Once play is clicked the poster gets hidden and moves the movie over and plays. That worked fine.

The poster attribute only shows up if the movie isn’t loaded. I was hoping it would show up as the default frame for the movie before it played, but instead it just showed the first frame of the movie.

You may also like...

  • jeremy lacivita

    Hmmm.. nytimes.com seems to have custom controls on top of the video… How’d they do it?

    I ran into all the same issues as you, btw, so nice to know someone else is out there :/

  • jeremy lacivita

    nevermind, i just noticed the design of the controls is different on safari of iPad and Safari for Mac. NYT is using the default apple controls.

  • Rob

    Hi Jeremy – you can put stuff on top of the video tag… the only catch I found was that you can’t do it if the video tag is added to the page via javascript. If it’s in the HTML when the page is rendered it shouldn’t be a problem. You just have to hide it off screen to the left until you want to show it.

  • kenan

    Wall Street Journal is faking autoplay on the ipad, any idea how that is implemented?

    • Rob

      Very Interesting. I’ll have to dig into that some more. Maybe they are faking a click. I tried doing that at one point with jQuery’s click event, for example:
      $(function() { $(“#playBtn”).click(); });

      But no luck. Maybe they figured out a better way to fake an event since according to Apple having a user initiated event is a prerequisite for playing. It could even be a timing thing, perhaps faking a click won’t work until the movie is loaded… I’ll have to dive into it a little deeper and see, but that’s my gut reaction. Thanks for pointing this out Kenan!

  • Rob

    That’s what they’re doing. Creating a fake link, binding the event to it, and then triggering the click event. This tricks Mobile Safari into thinking the user initiated the event. I tested on my iPhone and it works, still haven’t tested on a Pad but I’d assume it’s the same.

    Here’s a sample:
    http://www.roblaplaca.com/examples/html5AutoPlay/

  • venkat

    abc.com also has an autoplay video playing on the top right. I couldn’t quite tell if it is using a fake link.

    http://abc.go.com/watch

  • http://www.williamrust.com wRust

    Has anyone had any luck with placing a into an iframe in mobile safari? In trying this, I get the video play button to display for a split second and it vanishes. The fake link trick does not allow the video to start either. It seems like the video is just removed from the page loaded into the iframe ( i need to use iframes to provide for static navigation). Using innerHtml is not an option as the loaded pages require their own javascript.

    Any ideas would be much appreciated. Thanks!

  • Roger Theriault

    http://developer.apple.com/safaridemos/showcase/video/scripts/video.js

    see the redraw function in Apple’s code. It seems unbinding and rebinding the click even is all you need to do, at certain points in your events, to make the controls respond. jQuery’s live() function doesn’t work, you need to unbind and then bind.

  • Pingback: iPad and iPhone html5 video autoplay | Rob LaPlaca

  • Pingback: Quora

  • Dustin Dempsey

    “After injecting the video tag via javascript you can’t put anything on top of the video”

    This has been super frustrating for me. Any way around it?

  • Dustin Dempsey

    “If you do put an element on top of video, the video tag will devour any click events that occur”

    This has been super frustrating for me. Any way around it?