web-dev-qa-db-fra.com

Comment lire un fichier vidéo mp4 avec une balise vidéo HTML5 sur iOS (iPhone et iPad)?

Je souhaite afficher la vidéo HTML5 à mes utilisateurs à l'aide de la balise video. WEBM pour Firefox, Chrome et Opera fonctionne comme prévu. Dans Safari sous Windows et Mac, ma version MP4 fonctionne également. Le seul problème que je rencontre est qu'il ne jouera pas sur iPad et iPhone (Safari bien sûr).

Créer une vidéo

Le MP4 (h.264 + acc-lc) est converti comme suit (avec le profil: baseline et le niveau 3.0 pour une compatibilité maximale avec iOS):

  • Flux # 0: 0 (eng): Vidéo: h264 (Ligne de base contrainte) (avc1/0x31637661), yuv420p, 640x352, 198 kb/s, 17 images/seconde, 17 tbr, 17408 tbn, 34 tbc (valeur par défaut) )
  • Flux n ° 0: 1 (eng): Audio: aac (LC) (mp4a/0x6134706D), 48000 Hz, stéréo, fltp, 56 kb/s (par défaut)

Edit: Sortie entière de la sonde ff (légères modifications du débit, etc. de celles mentionnées ci-dessus):

Metadata:
major_brand     : isom
minor_version   : 512
compatible_brands: isomiso2avc1mp41
encoder         : Lavf56.30.100
Duration: 00:01:00.05, start: 0.046440, bitrate: 289 kb/s
Stream #0:0(eng): Video: h264 (Constrained Baseline) 
(avc1 /0x31637661), yuv420p, 640x352, 198 kb/s, 25 fps, 25 tbr, 
12800 tbn, 50 tbc (default)
Metadata:
  handler_name    : VideoHandler
Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, 
stereo, fltp, 85 kb/s (default)
Metadata:
  handler_name    : SoundHandler

J'ai trouvé diverses exigences pour les appareils iOS comme this et this , aussi quelqu'un mentionné pour ajouter le format de pixel yuv420p lors de la conversion.

En fait, le ffmpeg cmd ressemble à ceci:

ffmpeg -i __inputfile__ -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -b:v 200K -r 17 -bt 800K -c:a libfdk_aac -b:a 85k -ar 44100 -y __outputfile_lowversion__.mp4

Afficher la vidéo

Avec Modernizr, je détecte le format "pris en charge" et l’ajoute à la balise src ou video. La dernière chose est d'ajouter le bon type MIME. Pour mp4 j'ajoute type="video/mp4". Le code complet de la balise video est:

<video class="p-video" preload="auto" autoplay="" type="video/mp4" src="http://full.url/to/video_low.mp4"/>

J'ai essayé de différentes manières: propre implémentation avec une interface propre, des commandes et des outils de vendeurs de navigateurs et video.js, juste pour vérifier si je suis trop studip pour cela. Tous fonctionnent dans les environnements énumérés ci-dessus, sauf pour iPhone et iPad.

J'ai lu cet article sur Vidéo sur le Web , en particulier cette partie et ne sert que le fichier "right" avec le type "right" sans un ensemble posterattribute.

Mon apache a

AddType video/mp4                      mp4 m4v f4v f4p
AddType video/ogg                      ogv
AddType video/webm                     webm

Et les plages d'octets sont activées. Ceci est nécessaire pour obtenir un contenu partiel du serveur.

Quelqu'un at-il une idée de ce qui se passe là-bas? Merci d'avance!

Modifier: Safari et Chrome lancent tous les deux MEDIA_ERR_SRC_NOT_SUPPORTED Erreur sur iPad. Il doit y avoir un problème avec l'encodage.

iphonehtml5ipadffmpegmp4
6
Marc Saleiko

J'ai trouvé la raison pour laquelle iPad et iPhone ne veulent pas y jouer. Mon dossier a un accès restreint via htaccess pour protéger l'application bêta. Firefox, etc., transfère le nom d'utilisateur et le mot de passe à toutes les demandes, Safari sur Mac demande à nouveau les informations d'identification, mais pas les navigateurs sur iPad et iPhone. Pour vérifier rapidement ceci j'ai enlevé la protection de dossier et cela a bien fonctionné . Merci pour toutes les contributions et réflexions sur mon problème!

2
Marc Saleiko

Essayez de basculer l'attribut 'controls' - ou définissez src différemment.

 <video src="http://example.com/path/mymovie.mov"
         controls
         height=340 width=640
         poster="http://example.com/path/poster.jpg">
  </video>

Consultez cet article 'À propos de HTML5 Audio et Vidéo pour Safari' (guide du développeur)

En outre, une assistance stable de Nice à la balise HTML5 <video> pour iPad/iPhone est JW player. (fonctionne avec) 

 jwplayer('video').setup({
     flashplayer: '/Scripts/jwplayer/player.swf',
     file: 'seanpenn.mp4',
     autostart: false,
     controlbar: 'over',
     image: 'spicoli.jpg',
     width: 295,
     height: 214,
     skin: '/Scripts/jwplayer/glow.xml',
     stretching: 'exactfit'
 });
2
No-Spex