html5 - iOS 8 problems with video player when "apple-mobile-web-app-capable" mode is enabled -

Since iOS 8 was released, I'm struggling with a problem on a website I'm working on I am

We've created a tablet version of a website, and we've enabled Apple-Mobile-Web-App-enabled mode to look and feel more original apps. Then we ask our users, for the first time they load the website to add it to the website on the home screen.

When the website is loaded as a normal website in the iOS Safari browser, the video works, but in iOS 8, the video does not work in web-app-enabled, when you Start the web application from the Home screen.

I have set up a simple test, which reproduces the problem.

  & lt ;! DOCTYPE html & gt; & Lt; Html lang = "en" & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; Title & gt; IOS 8 Apple Mobile Web App Enabled Test & lt; / Title & gt; & Lt; Meta name = "description" content = "test video player in iOS 8 when adding shortcuts to the home screen" & gt; & Lt; Meta name = "author" content = "The Sourced Code" & gt; & Lt; Top & gt; & Lt; Meta name = "apple-mobile-web-app-enabled" content = "yes" /> & Lt; / Head & gt; & Lt; Body & gt; & Lt; Video width = "320" height = "240" control & gt; & Lt; Source src = "sample.mp4" & gt; Your browser does not support the video tag. & Lt; / Video & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

I have tested whether this could be a cross domain problem, because our videos are loaded from other domains, our primary domain names, but it has no effect on this issue Not as I have the same problem if I host the video file on the same domain.

I am googling to solve the problem, but I can not find a solution.

This may be a bug in Apple iOS 8, but I did not get any official message from Apple about this issue.

Please tell me if you are able to fix this problem.

"post-text" itemprop = "text">

IOS8 does not deal with this video for some reason.

There is no control over the iPad IOS 8, trying to full screen video, works fine on iOS6 and iOS 7, but I found out that the video was to be played in the absolute mode. Stop immediately after watching, then using an event listener, make sure that the video playback can start playing the game

In my case I used the CSS translation to give quick time to the technology To hide the bug did the page hide. . Video Overlay is a device with video poster image that switches on playback.

(Please delve into the mix of jQuery and Javascript event handlers!)

  Var videoWrapper = $ ('# Video-active'); Var introVideo = $ ('video') [0]; $ (Document) .ready (function () {introVideo.addEventListener ('canplaythrough', function) (introVideo.play (); videoWrapper.addClass ('active'); $ ('video overlay').); IntroVideo RemoveEventListener ('canplaythrough');}); VideoWrapper.on ('timeupdate', function) {onTrackedVideoFrame (this.currentTime); // This is not relevant - HTML was using the timeline to trigger text above the video at some points in the timeline.} ); $ ('.video-overlay'). One ('click', function () {introVideo.play (); introVideo.pause (); // Force the hack to play Load and then immediately videoWrapper.one ('click', function () {introVideo.pause (); // break video});});};);