web-dev-qa-db-fra.com

Pourquoi la vidéo HTML5 ne joue-t-elle pas dans IOS 8 WebApp (Webview)?

La vidéo HTML5 simple est lue sur le navigateur Safari. mais après l'ajout à l'écran d'accueil (WebApp autonome), cela ne fonctionne pas. Il fonctionne sur iOS7 mais a cessé de fonctionner sur 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>

S'il vous plaît aider. Existe-t-il une solution à ça?

ioshtml5html5-videoios8iphone-standalone-web-app
39
inaam husain

La lecture vidéo est interrompue sur les applications autonomes dans IOS 8.0.2

17
Julio Garcia

On dirait que iOS 8.3 corrige ce problème. J'ai une application Web autonome qui utilise un élément audio et qui fonctionne comme prévu maintenant. ENFIN!

7
gillennium

J'ai deux applications qui utilisent la vidéo HTML5. L'un a cessé de fonctionner, l'autre pas. Il y avait deux différences:

  • Celui qui fonctionne toujours ajoute les balises source à la balise video APRES l'ajout de la balise video au DOM.
  • La lecture automatique de l'application qui fonctionne toujours est définie sur false (<video autoplay="false">...</video>)

Le premier ne faisait aucune différence, le second faisait à nouveau fonctionner l'application.

2
malthoff

Je pense avoir trouvé une solution de contournement pour que l'audio ne fonctionne pas. Je ne peux pas vraiment expliquer pourquoi ce correctif fonctionne, mais c'est le cas.

Voici à quoi ressemblait mon ancien code:

// 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();

Voici ce que je fais maintenant.

// 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();
});

Dans mon esprit, les deux devraient fonctionner, cependant, dans la pratique, seul le second fonctionne pour iOS8. J'espère que ça aidera quelqu'un.

0
Matt Grande

Pour que cela fonctionne, j'ai trouvé l'élément video, puis créé un élément source dans un script (pas dans le code HTML) - étrange, je le sais:

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

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

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

J'accepte également le fait qu'il s'agit d'un problème ancien, mais je l'ai découvert alors que je testais sur un iPad sur lequel iOS 8.0.2 est installé et qui m'a surpris pendant une journée.

0
Chris