I had created a prototype and it worked fine in Safari and Firefox, but when I went to test it in the iPad, the video didn’t play. Even stranger, there were no errors and certain video events were still triggered. I hard coded an HTML player, and that worked, but not the dynamic one. I tried building it with both with
innerHTML and using
document.write does work, but this is not much different than using straight markup. recreating the bug is quite simple and looks like this:
s += '<video width="480" height="270" controls>' + '<source src="myVideo.mp4" type="video/mp4" />' + '</video>'; node.innerHTML = s;
I couldn’t find this fix on the web, I basically deduced it from a few other bug reports. There are issues with the video
poster property when used with the
child node objects. And if you have more than one
source object, iPad ignores all but the first. As you can see in the example above, the latter bug didn’t apply. Those reports led me to believe that when I dynamically created the video object, the
source/src wasn’t being set or read:
var video = p.node.getElementsByTagName("video"); video.src = "myVideo.mp4"; video.load();
I tried it and it worked. This fix is only necessary for the iPad, and in my code, I have a conditional that only applies it if so. I’d like to use feature detection, but considering the iPad is my primary target, I don’t want to cripple it by adding a lag that checks if the video is playing. I also don’t expect this to be a bug that will last past the next iPad update or two.
HTML5 video is a very exciting new feature but it is still new. I’ve created a ticket for this on on the Webkit bug tracker. Bugs are to be expected, but so far they have been a minor hindrance to the development of our HTML5 Video Player. Stay tuned to this series for more updates.