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.
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
onLoadplay event does not.”
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.