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?

Video playback is broken on standalone applications in IOS 8.0.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!

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

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.

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.

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.

来源：https://stackoverflow.com/questions/25972362/why-html5-video-doesnt-play-in-ios-8-webappwebview

标签

ios