La balise vidéo HTML5 ne fonctionne pas dans Safari, iPhone et iPad
J'essaie de créer une page Web html5 contenant une petite vidéo du type 13s. J'ai converti la version flash de cette vidéo au format 3: .ogv en utilisant fireFogg, .webm en utilisant firefogg également et .mp4 en utilisant l'application HandBrake le script html J'ai utilisé dans ma page:
<video width="800" height="640" loop preload="false" autoplay controls tabindex="0">
<source src="xmasvideo/video.mp4" type="video/mp4" />
<source src="xmasvideo/M&P-Xmas 2.ogv" type="video/ogv" />
<source type="video/webm" src="xmasvideo/M&P-Xmas.webm" />
</video>
La vidéo fonctionne correctement dans Chrome et FireFox, mais ne fonctionne pas du tout, ni dans Safari sur le bureau, ni sur l'iPhone ou l'iPad. Le résultat est tout simplement une page vierge qui affiche les commandes de la balise vidéo chargé
Notez que la version Safari que je possède prend en charge la vidéo HTML5
Une autre solution possible pour vos futurs chercheurs: (Si votre problème n’est pas un problème de type MIME.)
Pour une raison quelconque, les vidéos ne seraient pas lues sur iPad à moins que je ne mette le drapeau controls = "true".
Exemple: Cela a fonctionné pour moi sur iPhone mais pas sur iPad.
<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
Et cela fonctionne maintenant sur iPad et iPhone:
<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
J'ai eu le même problème avec Apple appareils tels que l'iPhone et l'iPad, j'ai désactivé le mode d'économie d'énergie et cela a fonctionné. Vous devez également inclure l'attribut playsinline dans la balise vidéo comme ceci:
<video class="video-background" autoplay loop muted playsinline>
Cela n'a fonctionné qu'en incluant playsinline.
Votre serveur Web peut ne pas prendre en charge les requêtes HTTP d'octets. C'est le cas du serveur Web que j'utilise, ce qui entraîne le chargement du widget vidéo et l'affichage d'un bouton de lecture, mais le fait de cliquer sur ce bouton n'a aucun effet. - La vidéo fonctionne dans FF et Chrome, mais pas sur iPhone ou iPad.
En savoir plus ici sur mobiforge.com à propos des demandes d'octets, dans Annexe A: Diffusion en continu pour Apple iPhone :
Premièrement, le navigateur Web Safari demande le contenu et, s’il s’agit d’un fichier audio ou vidéo, ouvre son lecteur multimédia. Le lecteur multimédia demande ensuite les 2 premiers octets du contenu, afin de garantir que le serveur Web prend en charge les demandes de plage d'octets. Ensuite, s’il les prend en charge, le lecteur multimédia de l’iPhone demande le reste du contenu par plage d’octets et le lit.
Vous voudrez peut-être chercher sur le Web "iphone mp4 byte-range".
Si vos vidéos sont protégées par un système de connexion basé sur une session, Safari ne pourra pas les charger. En effet, Safari fait une demande initiale pour la vidéo, puis confie la tâche à QuickTime, qui en fait une autre demande. Safari conservant les informations de session, il passera l'authentification, mais pas QuickTime.
Vous pouvez le voir si vous consultez le journal d'accès au serveur ... d'abord la requête de Safari, puis la requête de QuickTime. Les autres navigateurs ne font qu'une seule demande à partir du navigateur lui-même.
Si tel est votre problème, vous devrez peut-être retravailler l'accès vidéo pour utiliser des jetons temporaires ou un accès limité dans le temps à partir de la demande d'origine. Je mettrai à jour cette réponse si je trouve une solution plus directe.
Pour les recherches futures également, j’avais un fichier mp4 que j’ai rétrogradé avec Handbrake en utilisant handbrake-gtk à partir de apt-get, par ex. Sudo apt-get install handbrake-gtk. Dans Ubuntu 14.04, le référentiel handbrake n'inclut pas la prise en charge immédiate de MP4. J'ai laissé les paramètres par défaut, enlevé la piste audio et cela génère un fichier * .M4V. Pour ceux qui s’interrogent, il s’agit du même conteneur, mais M4V est principalement utilisé sur iOS pour s’ouvrir dans iTunes.
Cela a fonctionné dans tous les navigateurs sauf Safari:
<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
<source src="//cdn.foo.com/bar-video.m4v" type="video/mp4">
<source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>
J'ai changé le type de mime entre video/mp4 et video/m4v sans effet. J'ai également testé l'ajout de l'attribut control et encore une fois, aucun effet.
Cela a fonctionné dans tous les navigateurs testés, y compris Safari 7 sur Mavericks et Safari 8 sur Yosemite. J'ai simplement renommé le même fichier m4v (le fichier lui-même, pas seulement le code HTML) en mp4 et reuploadé sur notre CDN:
<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
<source src="//cdn.foo.com/bar-video.mp4" type="video/mp4">
<source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>
Je pense que Safari attend pleinement un MP4 nommé. Aucune autre combinaison de fichier et de type mime n'a fonctionné pour moi. Je pense que les autres navigateurs optent d’abord pour le fichier WEBM, en particulier pour Chrome, même si je suis à peu près sûr que la liste des sources devrait sélectionner la première source prise en charge sur le plan technique.
Cela n'a toutefois pas résolu le problème vidéo sur les appareils iOS (iPad 3 "le nouvel iPad" et iPhone 6 testés).
Ajoutez simplement un attribut muted et tout fonctionnera correctement.
La source de cette réponse est ici: https://webkit.org/blog/6784/new-video-policies-for-ios/
Par défaut, WebKit aura les stratégies suivantes:
Les éléments
<video autoplay>respectent désormais l'attribut autoplay, pour les éléments qui remplissent les conditions suivantes:
- Les éléments
<video>pourront être lus automatiquement sans intervention de l'utilisateur si leur média source ne contient aucune piste audio.- Les éléments
<video muted>seront également autorisés à se lire automatiquement sans un geste de l'utilisateur.- Si un élément
<video>gagne une piste audio ou devient muet sans un geste de l'utilisateur, la lecture s'interrompt.- Les éléments
<video autoplay>ne commencent à jouer que lorsqu'ils sont visibles à l'écran, par exemple lorsqu'ils défilent dans la fenêtre d'affichage, sont visibles via CSS et insérés dans le DOM.- Les éléments
<video autoplay>s'interrompent s'ils ne sont plus visibles, par exemple en les faisant défiler hors de la fenêtre.Les éléments
<video>vont maintenant respecter la méthode play (), pour les éléments remplissant les conditions suivantes:
- Les éléments
<video>seront autorisés à jouer () sans un geste de l'utilisateur si leur média source ne contient aucune piste audio ou si leur propriété mute est définie sur true.- Si un élément
<video>gagne une piste audio ou devient muet sans un geste de l'utilisateur, la lecture s'interrompt.<video>les éléments seront autorisés à jouer () s'ils ne sont pas visibles à l'écran ou hors de la fenêtre d'affichage.- video.play () renverra une promesse qui sera rejetée si l’une de ces conditions n’est pas remplie.
Sur l'iPhone, les éléments
<video playsinline>seront désormais autorisés à être lus en ligne et ne passeront pas automatiquement en mode plein écran lorsque la lecture commencera. Les éléments<video>sans attributs de lecture en ligne continueront d'exiger le mode plein écran pour la lecture sur iPhone. Lorsque vous quittez le mode plein écran avec un geste de pincement, les éléments<video>sans lectureinline continuent à être lus en ligne.
J'ai constaté que bien que Safari prenne en charge la vidéo HTML5, le lecteur Quicktime doit être installé pour que cela fonctionne. Sur un site que j'ai construit et qui utilise la vidéo HTML5, l'utilisateur est averti lorsqu'il utilise Safari, lui indiquant qu'il doit avoir installé Quicktime, sinon il ne pourra voir que les transcriptions de vidéos. J'espère que cela t'aides.
J'ai rencontré des problèmes étranges avec des certificats SSL de "développement" non fiables, dans lesquels Safari mobile servira volontiers votre page, mais refuse de servir une vidéo à un "faux" certificat SSL, même si vous avez accepté le certificat.
Pour tester, vous pouvez déployer la vidéo ailleurs - ou basculer sur http (pour la page entière) et la lire.
L'ajout de "playsinline" fonctionne pour moi sur Iphone et Ipa si votre vidéo n'est pas mise en sourdine.
<video muted playsinline>
<source src="..." type="video/mp4">
</video>
Si vous ne voulez pas que votre vidéo soit mise en sourdine, mais que vous souhaitiez quand même la lecture automatique, essayez peut-être de supprimer l'attribut en sourdine avec js: Comment réactiver la vidéo html5 avec un accessoire en sourdine
Pour un fichier .mp4, cela fonctionne (safari mobile et desktop):
<video height="250" width="250" controls>
<source src="video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
Le controls=”true” mentionné dans un message ci-dessus ne me dit rien car Apple indique qu'il suffit d'utiliser des contrôles seuls.
Référence: “Pour utiliser de l'audio ou de la vidéo HTML5, commencez par créer un élément ou un élément, en spécifiant une URL source pour le support et en incluant l'attribut de contrôle. <video src="http://example.com/path/mymovie.mp4" controls></video> ”
Dans mes transactions (une petite digression) : j'ai constaté que le téléchargement d'une vidéo à partir d'un iPhone l'envoyait au serveur en tant que .quicktime. Ironiquement, c'est le problème lorsque vous essayez de lire la vidéo du serveur en safari. (mobile & desktop).
Donc si (comme moi) vous rencontrez un problème .quicktime (ou autre chose que .mp4) dans le safari , voici une solution fournie par Apple . Remarquez que je ne l'ai pas encore testé moi-même et que je ne suis pas très content d'un coup d'œil, je ne fais que fournir plus d'informations.
Référence: “Retourner au plug-in QuickTime Il existe un moyen simple de recourir au plug-in QuickTime qui fonctionne pour presque tous les navigateurs - Téléchargez le fichier JavaScript fourni par Apple, ac_quicktime.js, à partir de HTML Video Example et incluez-le dans votre page Web en insérant la ligne de code suivante dans votre tête HTML: <script src="ac_quicktime.js" type="text/javascript"></script> ”
Mise à jour: pour .quicktime renommez en .mov téléchargement préalable sur le serveur (dans le type de fichier base64 "data: video/mov;"), ignorez ac_quicktime .js. . . travaillera ensuite dans une balise vidéo html; Hackerdy Hack.
Depuis iOS 6.1, il n'est plus possible de lire automatiquement des vidéos sur l'iPad. Selon la documentation Apple, la fonctionnalité de lecture automatique ne fonctionne pas sur Safari dans tous les appareils ios, y compris l'iPad:
"Apple a décidé de désactiver la lecture automatique de la vidéo sur des appareils iOS, via des implémentations de scripts et d'attributs.
Dans Safari, sur iOS (pour tous les appareils, y compris l'iPad), où l'utilisateur peut être sur un réseau cellulaire et être facturé par unité de données, le préchargement et la lecture automatique sont désactivés. Aucune donnée n'est chargée jusqu'à ce que l'utilisateur l'ait initiée. "
Vous pouvez en lire plus dans cette Apple documentation
Pour IOS, utilisez uniquement le fichier source MP4. J'ai observé dans le dernier navigateur Safari un problème qui empêchait le navigateur Safari de détecter correctement le fichier source. De ce fait, la lecture automatique des vidéos ne fonctionne pas.
Permet de vérifier ci-dessous exemple -
<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
<source src="video/video.mp4" type="video/mp4"></source>
<source src="video/video.webm" type="video/webm"></source>
</video>
Comme j'ai utilisé mp4, webm dans les fichiers source. Safari supporte Webm mais toujours dans la dernière version de Safari, il sélectionnerait Webm et la lecture automatique de la vidéo échoue.
Donc, pour travailler en lecture automatique sur le navigateur pris en charge, je suggère de vérifier le navigateur en premier et sur cette base, vous devriez générer votre code HTML.
Donc, pour le safari, utilisez ci-dessous HTML.
<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
<source src="video/video.mp4" type="video/mp4"></source>
</video>
Pour les autres que le safari,
<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
<source src="video/video.webm" type="video/webm"></source>
<source src="video/video.mp4" type="video/mp4"></source>
</video>
En utilisant ce code, la vidéo sera lue dans tous les navigateurs de safari, ainsi qu'avec les appareils ios ... Allez-y tout le monde (je l'ai déjà utilisé et je fonctionne bien)
`
<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
<source src="video/video.mp4" type="video/mp4"></source>
<source src="video/video.webm" type="video/webm"></source>
<source src="video/video.mov" type="video/mov"></source>
</video>`
J'ai fait face au même problème. Parce que ma taille d'image vidéo était trop grande. ie.2248 px Apple prend en charge la vidéo H.264 Baseline Profile Level 3.0, jusqu'à 640 x 480 à 30 ips. Notez que les images B ne sont pas prises en charge dans le profil de base. cochez cette case pour plus d'infos
fonctionne, mais MacOs a récemment une politique de lecture automatique pour l'utilisateur: https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/ , j'ai résolu le même problème à l'aide d'un bouton pour activer le son:
ejm:
<video autoplay loop muted id="myVideo">
<source src="Amazon.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos...
</video>
<button class="pausee" onclick="disableMute()" type="button">Enable sound</button>
<script>
var vid = document.getElementById("myVideo");
function disableMute() {
vid.muted = false;
}
</script>Ce qui a aidé dans mon cas était de laisser tomber la piste audio. C'était silencieux avant, mais il devait être complètement disparu.
Sur Ubuntu:
ffmpeg -i input.mp4 -vcodec copy -an output.mp4
Et safari/desktop commencent à jouer la vidéo
J'ai eu le même problème - assurez-vous que l'URL de la ressource vidéo provient d'un domaine sécurisé. Notre environnement de développement est http alors que la production est sécurisée. La vidéo étant référencée via un chemin relatif, elle ne fonctionnait pas en développement. Il semble que Apple nécessite que la vidéo soit sécurisée ...
J'ai eu ce problème où la lecture .mp4 dans Safari ne fonctionnait pas, mais dans d'autres navigateurs, tout allait bien. L'erreur que je voyais dans la console était la suivante: erreur support src non prise en charge. Dans mon cas, cela s'est avéré être un problème de type MIME, mais pas parce qu'il n'a pas été déclaré en tant que type MIME dans IIS, mais plutôt à deux reprises (une fois dans IIS et également dans un fichier web.config). fichier). J'ai découvert cela en essayant de télécharger le fichier .mp4 localement sur le serveur. J'ai supprimé le fichier de configuration de l'emplacement du contenu que j'essayais de lire et le problème a été résolu. J'aurais pu simplement supprimer le type MIME du fichier web.config, mais dans ce cas, le fichier web.config n'était pas nécessaire.