ios8 html5,html - Why HTML5 video doesn't play in IOS 8 WebApp(webview)? - Stack Overflow

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 not supported

';

// 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.