Why HTML5 video doesn't play in IOS 8 WebApp(webview)?

ios html html5-video ios8 iphone-standalone-web-app

37,380

Solution 1

Video playback is broken on standalone applications in IOS 8.0.2

Solution 2

Looks like iOS 8.3 fixes this issue. I have a standalone web app that uses an audio element, and it's working as expected now. FINALLY!

Solution 3

Confirming

Packaged cordova App cannot load video

Added:

<preference name="AllowInlineMediaPlayback" value="true"/>

to config.xml and

webkit-playsinline

to the video element.

The UI says video is Loading, while video.networkStatus remains 2 (NETWORK_LOADING) and video.readyState 0 (HAVE_NOTHING)

Safari playback works

Home screen launcher playback does not work

For the same webapp that worked in ios Safari, the homescreen version does not play videos either, and crashes the webapp when trying to change the source of the video.

I don't like apple :|

Solution 4

I have two apps that use HTML5 video. One stopped working, the other not. There were two differences:

The one that still works added the source tags to the video tag AFTER adding the video tag to the DOM.
The app that still works has autoplay set to false (<video autoplay="false">...</video>)

The first one made no difference, the second one made the app work again.

View more solutions

37,380

Author by

inaam husain

Updated on August 13, 2020

Comments

inaam husain almost 4 years

Simple HTML5 video plays on safari browser. but after adding it to home screen(Standalone WebApp), it doesn't work. It is working on iOS7 but stopped working on iOS8.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>HTML5 Video Standalone Test</title>
    <style>
    body{
        margin:0;
        }
    </style>
</head>
<body>
    <video src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v" autoplay="autoplay" controls="true" webkit-playsinline />
</body>
</html>

Please help. Is there any solution for this?

frank over 9 years

Video and Audio tags are broken in iOS 8.0.2 web app
0x6A75616E over 9 years

Is there an official source that confirms this claim?
kravc over 9 years

Video playback is not working in cordova apps as well. Nothing happens after tap on play button. Hopefully they'll fix it soon.
kravc over 9 years

After looking into this once again, I've figured that Angular policies was the problem in my case. Now I can confirm that embedded <video> is working in cordova app.
Darragh Enright over 9 years

My worst fears comfirmed - but thanks for confirming. This is really awful.
alastairtree over 9 years

Still broken in ios 8.1.2. Nice repro case available at tests.mikeditum.co.uk/iPad/video_playback.html. I have reported it to apple
jrh over 9 years

Confirming that, as of this comment, changing the source of a video in a home-screen web-app crashes the app.
Daniel about 9 years

cannot confirm on iOS 7.1 - doesn't work after "Add To Home Screen"
Matyas about 9 years

I've tried a webview app with embedde videos on an ipad and did not work on ios 8.3. Do you have any references to the bugfix?
japetheape about 9 years

I can confirm video playback in a standalone webapp works in iOS 8.3, while it didn't work in 8.2.
ydaniv about 9 years

On iOS 8.0.2 and 8.1.2 happens for Audio as well. Works like a charm on regular Safari and Chrome, either crashes on desktop or not playing at all, and only plays all playbacks on unload.
ydaniv about 9 years

Confirming upgrade to 8.3 fixes Audio on desktop as well.
Julio Garcia over 8 years

Finally fixed on IOS 9
user1788736 about 8 years

I added autoplayy="flase" and still the webApp crashes as soon as i click the play button! I tested it on ios 8.1.3 . Could you tell me how did you create the play button that worked ?Thanks in advance
user1788736 about 8 years

i tried $(source).attr('src', myfile);player.load(); player.webkitEnterFullscreen(); player.play(); but webApp crashed on ios 8.1.3 . could you tell me what i am doing wrong ? Thanks in advance
user1788736 about 8 years

Thanks for reply . source is: var source = document.getElementById('mp4'); I even tried your exact code and sending the video url via this hyperlink <a href="javascript:playvideo('w3schools.com/html/mov_bbb.mp4',‌'./…> But the webApp Crashes! could you post a demo in jsfiddle that didn't crash the app?
Chris about 8 years

What crash do you get? - for example the video file you've posted is a 404
user1788736 about 8 years

The webApp closes instead of playing the video. The example url is w3schools.com/html/mov_bbb.mp4