Html5 video player not working in chrome how to#
Html5 video player not working in chrome code#
Html5 video player not working in chrome download#

Html5 video player not working in chrome download#

Another issue that I’ve found out is that setting display:none blocks the video download and that visibility:hidden also doesn’t solve the issue. My first attempt to solve this issue was to add an overlay on top of the video while it was loading and then fade it out after the video started to play or just set the video opacity to zero (since I wanted to fade the video after it finished loading), but unfortunately the QuickTime logo doesn’t respect the z-index or opacity of the video element, so it appears over any element. The iPad displays the QuickTime logo sometimes while the video component is being instantiated, this can be very annoying and sometimes it can take a long time before it downloads the video metadata and/or poster image. So instead of seeking to 12.3456 I started seeking to 12.3 - I haven’t done exhaustive tests on this but on my case it worked fine and I wasn’t able to replicate the bug anymore. Seeking to float point numbers with a single decimal digit in my case also solved some weird seeking behaviors on iOS 3.2.

Html5 video player not working in chrome how to#

Here is an example of how to make an inline video loop (won’t work on fullscreen play). The way to fix it is to seek to 0.1 instead of 0. Setting currentTime to zero on “all” browsers makes the video start playing from the first frame, unfortunately doing that on iOS 3.2 breaks the currentTime property (value isn’t updated during playback) and also breaks the ended event dispatch. The HTML5 video element have an attribute loop which doesn’t work on iOS (as of iOS 4.2), the video element also expose the property currentTime which is used to read the current playback position or to seek to a specific position.

PS: On previous versions of iOS you could simulate a click event to trick the browser to start downloading the video but I don’t recommend using any technique that abuses flaws on the system, it can cause way more troubles than it solves, future updates on the OS may invalidate your whole application.

Html5 video player not working in chrome code#

Here is an example of the code required to preload a video after user interaction on iOS 3.2+:Īs you can see on the code comments it requires a series of hacks to make it work properly.

The HTML5 video element have a preload attribute, which is used to specify if any data of the media element should be loaded before an user interaction, unfortunately Apple decided to not support this attribute on iOS to reduce bandwidth usage. I’m sure I will leave a lot of important stuff behind but at least I’ll try to cover some bugs and how I solved them. The delay is mainly because I never found time to create sample files or record screencasts showing the bugs so I decided to publish it without any working examples since I don’t think I will have enough time or patience to isolate the problems and document it anytime soon, so you will have to believe that what I’m saying “is true” and that the bugs exist… Think of it as a reference in case you have any of those issues and not as a definitive way of making those things work, some bugs are only present on older versions of iOS and may not be easy to replicate. I’ve been delaying this post since I wrote a rant about the iPad.