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

Question

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.

Answer 1

I think I found a workaround for the audio not working. I can't really explain why this fix is working, but it is.

Here's what my old code looked like:

// Create the audio tag
var sprite = document.createElement('audio');
var id = document.createAttribute('id');
id.nodeValue = 'audio_sprite';
var src = document.createAttribute('src');
src.nodeValue = 'my-audio-sprite.mp3';

sprite.setAttributeNode( id );
sprite.setAttributeNode( src );

// Add it to the DOM
var body = document.getElementsByTagName('body')[0];
body.appendChild( sprite );

// Play/Pause to load the audio.
sprite.play();
sprite.pause();

Here's what I'm doing now.

// Grab an existing DOM element and create an audio tag.
var body = document.getElementById('hover');
body.innerHTML += '<audio id="audio_sprite"><p>Audio not supported</p></audio>';

// Apply the SRC to the audio tag.
// Q: Why don't we just do that in the step above?
// A: I'm not really sure why, but iOS8 doesn't like it. Sorry this is so ugly.
var sprite = document.getElementById( 'audio_sprite' );
sprite.src = 'my-audio-sprite.mp3';

// Once the metadata is loaded, call play/pause so we can play the audio later.
sprite.addEventListener('loadedmetadata', function() {
    sprite.play();
    sprite.pause();
});

In my mind, both should work however, in practice, only the second one does for iOS8. I hope this helps someone.

Answer 2

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.

Answer 3

Video playback is broken on standalone applications in IOS 8.0.2

Answer 4

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 :|

Answer 5

I got this working by finding the video element, then creating a source element in script (not in the html) - strange I know:

var video = document.getElementById('theVideo');
var source = document.createElement('source');

source.src = fileLocation
source.type = "video/mp4"

video.appendChild( source );
video.load();

I also accept this is an old issue, but I came across it as I was testing on an iPad that has iOS 8.0.2 installed and it caught me out for a day.

Answer 6

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!