Unsolved HTML5 video issues on iOS
On my last post I focused on issues that I’ve found a solution, this one is going to be about bugs and issues that I couldn’t find a solution and/or things that are impossible to do on the iPhone and iPad. It is important to note that I didn’t spent too much time searching or trying to find solutions for each problem but I consider most of them to be impossible to solve without a new OS release…
Screenshot of a video frame
With the “new” canvas API it is possible to capture video frames using the drawImage
method[1] which is supposed to accept an HTMLImageElement
or HTMLCanvasElement
or HTMLVideoElement
. The only problem is that on iOS this method doesn’t work with video elements. The same code that runs on other browsers (including Safari 5 desktop) doesn’t work on the iPad or iPhone.
The “solution”: export every single frame as an image and load it instead of capturing the video frame on real-time. – This is considered “cheating” not a “real” solution, but I had to do that in one project…
Can’t play sound and video together or multiple sounds or videos simultaneously
The media player on the iOS is a singleton, which means you can only have a single media element playing at each time[2], it doesn’t matter if it is audio or video. So if you try to play a sound file while a video is playing (e.g. sound effect for an user interaction) the video will be unloaded from the memory and you will see the Quicktime logo where the video was supposed to be - bummer.
No way to control volume using JavaScript
The HTML5 spec says that every media element have a property called volume
which is used to get and set the volume of the audio or video playback, this value should be a number from 0.0 to 1.0 (inclusive), but again Apple decided to not follow the standard on the iOS and only allow the volume control using the physical control [3]. Changing the property muted
also doesn’t have any effect on the iOS.
No way to play video inline on the iPhone
Videos always plays full-screen on the iPhone (as of iOS 4.2), I’m “sure” that it isn’t a technical issue since iAds can play inline videos without any problems and the iAd is simply an embedded UIWebView. – it seems that Apple doesn’t want webapps to succeed since they don’t pay 30% of the sales to them… – And don’t say that it is because the user won’t have enough available screen area to watch the video, that it is for a “better experience”, that it “saves battery”.. it is all bullsh*t, the browser UI don’t need to be so obstructive and in some specific cases it is totally fine to have the video playing on a small area, they are “doing it on purpose” just to push users to the app-based browsing (which they control and profit with).
No way to play or preload sound and video without user interaction
Media files are only downloaded and played if triggered by a click event, this can be very frustrating and limiting if your webApp requires those things to work properly. I think the right approach would be to prompt the user asking for permissions to download and play media files (the same way they do for getting the user location) and if the user allow it then you could load/play as many files as you want without asking again for permissions or requiring user interaction. If the user denied than it would require a click event to trigger the media elements. - No more lame excuses about bandwidth…
Multiple HTML5 video elements on the same page causes bugs
I tested this a couple months after they released the iPad and didn’t tested it after that, but on my simple test the iPad had issues with multiple video elements on the same page even if they aren’t playing simultaneously, that is another reason for using plain image tags as a poster image and only insert the HTML5 video element when you need it. – I’m not sure if this bug was fixed on newest versions though but I’ve seen some other people complaining about the same issue.
No way to play HTML5 video backwards added 2011/08/23
It doesn’t seem possible to play a video backwards smoothly. Trying to update the video.currentTime
on a timeout doesn’t update the frames fast enough and setting video.playbackRate
[4] to -1
have no effect.
Conclusion
Apple only “embraces” the standards when it is good for them, don’t believe in pure PR… the HTML5 talk is only to cause buzz and make people believe they are the “good guys”. If they really “embraced” standards you wouldn’t see implementations that doesn’t follow the specs and the iOS Safari wouldn’t have that many issues. They are clearly investing more money where they make more money (native apps and PR) and holding the “full” potential of the web as much as they can…
I’m going to end the post since it is getting lengthy and I can’t remember other things that made me upset but I’m sure I forgot something and/or I’m going to find other stuffs on the next projects… and yes, I love HTML/CSS/JS, I really enjoy challenges (it is one of the only reasons I decided to work with development), I know what I’m talking about and I’m not giving up (as some people suggested on the comments of my rant), but two things that I don’t like: lies and fanaticism – don’t be a moron.
References
- Context2d.drawImage()
- Multiple simultaneous audio or video streams – iOS
- Volume control in JavaScript
- media.playbackRate