La balise vidéo HTML5 ne fonctionne pas dans Safari, iPhone et iPad

J'essaie de créer une page Web html5 dans laquelle il y a une petite vidéo comme 13s, j'ai converti la version flash de cette vidéo au format 3: .ogv en utilisant fireFogg, .webm en utilisant également firefogg 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 bien dans Chrome et FireFox mais ne fonctionne pas du tout ni dans Safari sur le bureau ni sur iPhone ou iPad, la sortie est simplement une page vierge qui montre les contrôles de la balise vidéo mais rien n'est chargé

Notez que la version Safari que j'ai prend en charge la vidéo HTML5

J'ai eu le même problème avec les appareils Apple comme l'iPhone et l'iPad, j'ai désactivé le mode basse consommation et cela a fonctionné et vous devriez également inclure un playsinlineattribut dans la balise vidéo comme ceci:

<video class="video-background" autoplay loop muted playsinline>

Cela ne fonctionnait qu'en incluant playsinline.

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 définisse 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>

Votre serveur Web peut ne pas prendre en charge les demandes de plage d'octets HTTP. C'est le cas avec le serveur Web que j'utilise, et le résultat est que le widget vidéo se charge et qu'un bouton de lecture apparaît, mais cliquer sur le 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 sur les demandes de plage d'octets, dans l' annexe A: Streaming pour Apple iPhone :

Tout d'abord, le navigateur Web Safari demande le contenu, et s'il s'agit d'un fichier audio ou vidéo, il ouvre son lecteur multimédia. Le lecteur multimédia demande ensuite les 2 premiers octets du contenu, pour s'assurer que le serveur Web prend en charge les requêtes de plage d'octets. Ensuite, s'il les prend en charge, le lecteur multimédia de l'iPhone demande le reste du contenu par plages d'octets et le lit.

Vous voudrez peut-être rechercher sur le Web "gamme d'octets iphone mp4".

Si vos vidéos sont protégées par un système de connexion basé sur la session, Safari ne les chargera pas. En effet, Safari fait une demande initiale pour la vidéo, puis confie la tâche à QuickTime, qui en fait une autre demande. Puisque Safari détient les informations de session, il passera l'authentification, mais pas QuickTime.

Vous pouvez voir cela si vous affichez votre journal d'accès au serveur ... d'abord la demande de Safari, puis la demande de QuickTime. Les autres navigateurs ne font qu'une seule requête depuis le 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 ainsi, j'avais un fichier mp4 que je régionalisé avec frein à main à l' aide handbrake-gtkde apt-get, par exemple sudo apt-get install handbrake-gtk. Dans Ubuntu 14.04, le handbrakeréférentiel n'inclut pas le support pour MP4 prêt à l'emploi. J'ai laissé les paramètres par défaut, supprimé la piste audio et généré un fichier * .M4V. Pour ceux qui se demandent, 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 mime entre video/mp4et video/m4vsans effet. J'ai également testé l'ajout de l' controlattribut 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 réel, pas seulement le HTML) en mp4 et réimporté 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 réellement 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 Chrome, même si je suis presque sûr que la liste des sources devrait sélectionner la première source techniquement prise en charge.

Cela n'a cependant pas résolu le problème de la vidéo dans les appareils iOS (iPad 3 «le nouvel iPad» et iPhone 6 testés).

Ajoutez simplement un mutedattribut 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 politiques suivantes:

<video autoplay> Les éléments honoreront désormais l'attribut de lecture automatique, pour les éléments qui remplissent les conditions suivantes:

• <video> les éléments pourront être lus automatiquement sans geste de l'utilisateur si leur média source ne contient aucune piste audio.
• <video muted> les éléments pourront également être lus automatiquement sans geste de l'utilisateur.
• Si un <video>élément gagne une piste audio ou devient réactivé sans un geste de l'utilisateur, la lecture s'arrête.
• <video autoplay> Les éléments ne commenceront à jouer que lorsqu'ils seront visibles à l'écran, par exemple lorsqu'ils défilent dans la fenêtre d'affichage, sont rendus visibles via CSS et insérés dans le DOM.
• <video autoplay> les éléments se mettront en pause s'ils deviennent non visibles, par exemple en faisant défiler la fenêtre hors de la fenêtre.

<video> Les éléments honoreront désormais la méthode play (), pour les éléments qui remplissent les conditions suivantes:

• <video> les éléments 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é muted est définie sur true.
• Si un <video>élément gagne une piste audio ou devient réactivé sans un geste de l'utilisateur, la lecture s'arrête.
• <video> les éléments seront autorisés à jouer () lorsqu'ils ne sont pas visibles à l'écran ou lorsqu'ils sont hors de la fenêtre.
• video.play () renverra une promesse, qui sera rejetée si l'une de ces conditions n'est pas remplie.

Sur iPhone, les <video playsinline>éléments seront désormais autorisés à jouer en ligne et ne passeront pas automatiquement en mode plein écran lorsque la lecture commencera. <video>les éléments sans attributs de lecture en ligne continueront à nécessiter le mode plein écran pour la lecture sur iPhone. Lorsque vous quittez le plein écran avec un geste de pincement, les <video>éléments sans lecture en ligne continueront de jouer en ligne.

J'ai constaté que même si Safari prend en charge la vidéo HTML5, le lecteur Quicktime doit être installé pour que cela fonctionne. Sur un site que j'ai construit qui utilise la vidéo HTML5, l'utilisateur est alerté lors de l'utilisation de Safari, lui indiquant qu'il doit avoir installé Quicktime, sinon il ne pourra voir que les transcriptions vidéo. J'espère que cela t'aides.

J'ai vu des problèmes étranges avec des certificats SSL de `` développement '' non fiables où 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 passer à http (pour toute la page) et elle devrait être lue.

L'ajout de «playinline» fonctionne pour moi sur Iphone et Ipa si cela ne vous dérange pas que votre vidéo soit coupée.

<video muted playsinline>
  <source src="..." type="video/mp4">
</video>

Si vous ne voulez pas que votre vidéo soit coupée, mais que vous voulez toujours la lecture automatique, essayez peut-être de supprimer l'attribut muet avec js: Comment réactiver la vidéo html5 avec un accessoire muet

Depuis iOS 6.1, il n'est plus possible de lire automatiquement des vidéos sur l'iPad. Selon la documentation Apple, la fonction de lecture automatique ne fonctionne pas sur Safari sur tous les appareils iOS, y compris l'iPad:

«Apple a pris la décision de désactiver la lecture automatique de la vidéo sur les 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 tant que l'utilisateur ne le lance pas. "

Vous pouvez en lire plus dans cette documentation Apple

Pour un .mp4, cela fonctionne (Safari Mobile & Desktop):

<video height="250" width="250" controls>
    <source src="video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

Les éléments controls=”true”mentionnés dans un article ci-dessus ne me font aucun sens, car Apple dit simplement d'utiliser les contrôles seuls.

Référence: «Pour utiliser l'audio ou la vidéo HTML5, commencez par créer un élément ou, en spécifiant une URL source pour le média et en incluant l'attribut de contrôle. <video src="http://example.com/path/mymovie.mp4" controls></video>"

Source: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html

Dans mes relations (une petite digression) : j'ai constaté que le téléchargement de vidéo depuis l'iPhone l'envoyait au serveur en tant que .quicktime. Ironiquement, c'est le problème lorsque vous essayez de lire la vidéo à partir du serveur en safari. (mobile et bureau).

Donc, si (comme moi) vous rencontrez un problème .quicktime (ou autre chose que .mp4) dans Safari , voici une solution de contournement fournie par Apple. Notez que je ne l'ai pas encore testé moi-même et je ne suis pas tout à fait satisfait de cela en un coup d'œil, fournissant simplement plus d'informations.

Référence: «Revenir au plug-in QuickTime Il existe un moyen simple de revenir au plug-in QuickTime qui fonctionne pour presque tous les navigateurs: téléchargez le fichier JavaScript prédéfini 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 en-tête HTML: <script src="ac_quicktime.js" type="text/javascript"></script>"

Source: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP400095W6

Mise à jour: pour .quicktime renommer le .movtéléchargement précédent sur le serveur (dans le type de fichier base64 "data: video / mov;"), ignorez ac_quicktime.js. . . fonctionnera alors dans la balise vidéo html; Hackerdy ​​Hack.

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 utilisé et 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 eu un problème similaire où les vidéos à l'intérieur d'une <video>balise ne jouaient que sur Chrome et Firefox, mais pas sur Safari. Voici ce que j'ai fait pour y remédier ...

Une astuce étrange que j'ai trouvée était d'avoir deux références différentes à votre vidéo, l'une dans une <video>balise pour Chrome et Firefox, et l'autre dans une <img>balise pour Safari. Fait amusant, les vidéos sont effectivement lues dans une <img>balise sur Safari. Après cela, écrivez un script simple pour masquer l'un ou l'autre lorsqu'un certain navigateur est utilisé. Donc par exemple:

<video id="video-tag" autoplay muted loop playsinline> 
    <source src="video.mp4" type="video/mp4" />  
</video>
<img id="img-tag" src="video.mp4">

<script type="text/javascript">
    function BrowserDetection() {

    //Check if browser is Safari, if it is, hide the <video> tag, otherwise hide the <img> tag
    if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
        document.getElementById('video-tag').style.display= "none";
    } else {
        document.getElementById('img-tag').style.display= "none";
    }               

    //And run the script. Note that the script tag needs to be run after HTML so where you place it is important. 
    BrowserDetection();
</script>

Cela aide également à résoudre le problème d'un mince cadre / bordure noire sur certaines vidéos sur certains navigateurs où elles ne sont pas rendues correctement.

J'ai eu ce problème où la lecture .mp4 dans Safari ne fonctionnait pas, mais dans d'autres navigateurs, c'était bien. L'erreur que je voyais dans la console était: erreur média 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é comme type MIME dans IIS, mais plutôt qu'il a été déclaré deux fois (une fois dans IIS et également dans un fichier web.config). 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 cela a résolu le problème. 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.

Pour IOS, veuillez utiliser uniquement le fichier source mp4. J'ai observé un problème dans le dernier navigateur Safari: le navigateur Safari ne peut pas détecter correctement le fichier source et à cause de cela, la lecture automatique vidéo ne fonctionne pas.

Vérifions l'exemple ci-dessous -

     <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 deosnt prend en charge le webm mais toujours dans la dernière version de safari, il sélectionnerait webm et échouerait la lecture automatique de la vidéo.

Donc, pour travailler la lecture automatique sur le navigateur pris en charge, je suggérerais de vérifier d'abord le navigateur et en fonction de cela, vous devez générer votre 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 autre que 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>

J'ai eu le même problème - assurez-vous que l'URL de l'élément vidéo provient d'un domaine sécurisé. Notre environnement de développement est http tandis que la production est sécurisée. La vidéo étant référencée via un chemin relatif, elle ne fonctionnait pas sur le développement. Semble être un problème qu'Apple nécessite que la vidéo soit sécurisée ...

fonctionne mais MacOs a récemment mis en place 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 en utilisant 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>

J'ai rencontré le 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 cadres B ne sont pas pris en charge dans le profil de base. vérifiez ceci pour plus d'informations

Ce qui a aidé dans mon cas, c'est de laisser tomber la piste audio. Il était silencieux avant, mais il devait être complètement parti.

Sur Ubuntu:

ffmpeg -i input.mp4 -vcodec copy -an output.mp4

Et safari / bureau commence à lire la vidéo

Pour mon cas d'utilisation, il y avait deux choses :

1. Je n'utilisais pas la politique du nouvel attribut / webkit playsinline ;
2. Ma vidéo / type mime ou whathathell n'était pas correctement encodée, j'ai donc utilisé ce site pour le convertir dans tous les formats dont j'avais besoin: https://pt.converterpoint.com/

o /

J'ai eu exactement le même problème, ma balise vidéo HTML a bien joué sur Chrome et Mozilla, sur Safari - les commandes sont apparues mais la vidéo était vide. J'ai essayé de jouer avec tous les attributs ci-dessus, supprimer / ajouter en sourdine, playInline, etc. et rien n'a fonctionné. Le problème concernait également les serveurs décrits ici. J'avais ceci - N'A PAS FONCTIONNÉ:

<video 
  muted
  playsInline
  controls
  style={{ width: `100%` }}>
  <source src={MfMfVideo} type="video/mp4" />
  <source src={MfMfVideoWebM} type="video/webm" />
</video>

et je viens de déplacer ma vidéo vers une bibliothèque externe et je vais bien sur Safari maintenant, cela fonctionne bien:

<video 
  muted
  playsInline
  controls 
  style={{ width: `100%` }}>
  <source src={"https://blabla.com/video/dixneuf-video_r8xuvc.mp4"} type="video/mp4" />
  <source src={"https://blabla.com/videodixneuf-video_gyquuu.webm"} type="video/webm" />
  Sorry, your browser doesn't support embedded videos.
</video>

Rien n'a fonctionné pour moi à part la compression de la vidéo pour qu'elle soit inférieure à 30 Mo. Cela a fait l'affaire mais avec une très mauvaise compression.

Si quelqu'un a le même problème, je l'ai résolu en activant le support Byte-Range sur mon serveur. Il semble que Safari nécessite des demandes de plage d'octets. Dans mon cas, j'utilise NGINX et j'ai dû ajouter proxy_force_ranges on;à mon fichier de configuration. Merci à cette réponse !