JAVASCRIPT HTML5 VIDEO DISPLAYING GREEN MP4
JAVASCRIPT HTML5 VIDEO DISPLAYING GREEN WINDOWS

During the testing of some of my work-arounds, I noticed that the videos refuse to play after coming out of hiding (CSS styles from 'display:none' to 'visibility:hidden') - I believe this issue directly relates to Apple's standing on autonomous data usage: This is where the thought of hiding it comes into play - But wait! This'll fail as well if you intend on using your overlaid elements to play the video (perhaps acting as a play button). Wherever that video sits will be 'dead space'. This means we cannot simply push it somewhere inside of a div, with overflow set to hidden, and hope that it'll just work. As mentioned earlier, the video element (at least on iOS devices) soaks up all touch events over it, no matter what layer it's on (z-index) and what's in front of it. There is, unfortunately, another caveat when attempting to use this solution. We then need to leave something in the void that looks like the video, like a poster - The poster will allow us to place items on it, overlaid, that will be interact-able. To do this, in theory, we need to hide the video so that it cannot soak up any touch events. We can, however, give the illusion of having overlaid elements (which is almost as good). Unfortunately, there is absolutely no way around the issue of not being able to catch touch events on overlaid elements when a video element is concerned. A Solution for Overlaid Elements on Video

JAVASCRIPT HTML5 VIDEO DISPLAYING GREEN WINDOWS

This effect is undesirable in terms of user interactivity, and the issue appears on Windows Phones as well, carving out a good portion of the market that would not be able to use this custom 'control'. Let's imagine that the green box is actually a button designed to open something else, like an ad or a form - This button becomes useless on mobile devices, but still appears over the video item. If you viewed this page on a desktop computer, however, and clicked the green box, it will turn blue for a moment then go green again. If you place this on a webserver and browse to it on an iPhone, you will see that you cannot interact with the green box (div) sitting over the video.

JAVASCRIPT HTML5 VIDEO DISPLAYING GREEN MP4

You can obviously use any MP4 in-place of the chipmunk video used in this code. Var overlayElement = document.getElementById( 'overlayElement') The following HTML provides an example of the issues associated with overlaid elements on HTML5 video on iPhones etc.: HTML5 Video Test We can demonstrate this issue with a quick test - Let's assume we have a webpage (video.html) and a video file (chipmunk.mp4). This is just one example (taken from here) where Apple states that you cannot place items over video elements on iPhone and iPod. On iOS-based devices with larger screens, such as iPad, you can superimpose canvas graphics on playing video, just as you can on the desktop. On iOS-based devices with small screens-such as iPhone and iPod touch-video always plays in fullscreen mode, so the canvas cannot be superimposed on playing video. Any hope of having interactive elements placed on top (or somehow overlaying) of a HTML5 video on these mobile devices is dashed when reading Apple's documentation: One of the major problems is playback initiation on some mobile platforms, namely iOS and Windows Phone (8) - For instance, iPhones will prevent touch events ('clicks') from registering to any and all elements over the video's bounding box (frame). The video playback itself has been standardised, as most platforms support the element's parameters and some similar formats (some still have problems with the major containers like MP4 etc.), but the way in which the video element itself is handled whilst in the context of a web page differs greatly between platforms. This has made supporting video playback on mobile devices somewhat seamless, as the HTML5 standard is supported on most web-facing platforms. When we think of video on the Internet, we think more and more of HTML5 video and less of Flash players.

Javascript html5 video displaying green