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).
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):
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
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 poster
attribute.
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.
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!
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'
});