- iOS (even iPad) won't autoplay
- An element with
background-attachment: fixedwon't respect that property when it's over a video in webkit - IE10 will show a black image while it's loading unless you set a poster property
- In IE9, loop only works if the video is also autoplay
- If you try to play a video in IE10 before it's ready, you will see black for a bit. This is a bummer, because autoplay is probably turned on for IE9.
- I had mixed results getting videos to autoplay on Android. And a fair amount of browser crashing. In fact, in the end, I just disabled video altogehter.
- On iOS, I created a play button (just an
a) link, that when clicked takes the video fromdisplay:nonetodisplay:blockwhile triggering the.play()API on the video element. This made the video go fullscreen on iPhone and play inline on iPad. - How to detect the fullscreen close on iPhone: http://stackoverflow.com/a/12169341/59160
- A newer article on the subj: http://www.sitepoint.com/essential-audio-and-video-events-for-html5/
- In IE9, videos may not play unless the are visible (
display:block) when they are loaded. - The official spec video example: http://www.w3.org/2010/05/video/mediaevents.html
- In IE9, when writing a video tag into the page with JS, you have to insert it all at once: http://stackoverflow.com/a/7174877/59160
In summary, here is the approach that ended up working for me on Equil:
- All videos are display none by default. No special attributes are on the video (
preload,autoplay, etc) - The manual-cover plugin sizes them (which causes a brief
display:block, but leaves them asdisplay:nonein the end) - When it's time to play a video, I:
- Set display to block
- If IE9, call video.load()
- Call video.play()
- The above occurs all in sequence with no delays. Note, the
load()will reset (and reload) the video. So for another site, this may not make sense. I'd like to find a better solve that doesn't redownload the video again and doesn't require targeting IE9 specifically.