web-dev-qa-db-fra.com

Pourquoi Safari sur iOS n'affiche pas mon affiche vidéo HTML5?

J'ai cette page Web:
http://healthpad.net/dashboard/
Il a 10 <video> éléments dessus.

Pour une raison quelconque, lorsque je charge la page sur un iPad, elle ne montre pas les affiches vidéo.

Essayez ce qui suit:

  1. charger la page sur un navigateur de bureau
  2. chargez-le sur un iPad ou un simulateur d'iPad, et vous obtenez une grande boîte noire avec un bouton de lecture

image

s'il vous plaît dites-moi pourquoi cela se produit?

Voici ce que j'ai déjà exclu:

En-tête de type de contenu d'image.
J'ai validé que l'en-tête de type de contenu d'image est correctement défini. Dans l'exemple ci-dessus, le Content-Type l'en-tête correctement image/jpeg.

Interférence avec la bibliothèque video.js
VideoJs est utilisé pour montrer ce bouton Nice play sur les navigateurs de bureau et pour personnaliser les commandes. Cette bibliothèque n'interfère cependant pas avec le lecteur natif.
Juste pour être sûr, j'ai créé une page de vidéo de test qui n'a pas la classe video-js, donc la bibliothèque ne récupère pas et ne traite pas cette vidéo. En fait, la page de test ne comprend même aucune bibliothèque JS, c'est juste

<html><body>
    <video
        controls
        height="400"
        width="600"
        poster="http://healthpad.net/media/CACHE/images/uploads/video_poster_1414/bd5fba5a68ddd0f4b3f61193f6908962.jpg"
        src="http://healthpad.net/media/uploads/video_processed_720p_1414.mp4"
    ></video>
</body></html>

http://healthpad.net/rj_templates/test/zzz/

Utilisation de tout attribut vidéo non pris en charge sur Mobile Safari
La page de test ci-dessus a juste une balise vidéo simple. J'ai essayé de supprimer tous les autres attributs à l'exception de src et poster, cela n'a pas aidé.

La plupart des questions StackOverflow sur le sujet disent simplement "Redémarrez votre iPad"

Voici où ça devient bizarre:

Si vous faites une recherche sur Google à ce sujet, les réponses sur StackOverflow qui ont été acceptées disent souvent "Redémarrez votre iPad, c'est fait pour moi".

J'ai donc essayé de faire la même chose, au début, je viens de dire que cela ne fonctionne pas dans mon cas.

Ensuite, j'ai essayé ceci:
(tous les éléments suivants sur le simulateur iPad)

  1. Allez sur le site, les affiches vidéo ne montrent pas
  2. Accédez à la page de test ( http://healthpad.net/rj_templates/test/zzz/ ), l'affiche vidéo ne s'affiche pas.
  3. Cliquez sur home pour quitter Safari (ou raccourci Cmd + Shift + H mac pour le simulateur)
  4. Double-cliquez sur le bouton d'accueil pour sortir le sélecteur de tâches en dehors de Safari, appuyez et maintenez sur l'icône de safari jusqu'à ce que le bouton kill s'affiche.
  5. Kill Safari
  6. Safari ouvert (redémarré). À ce stade, si vous chargez la page de test (celle avec une seule vidéo), l'affiche s'affiche.
  7. Allez maintenant sur la page multi-vidéo: ( http://healthpad.net/dashboard/ ). Les affiches vidéo ne montrent pas.
  8. Revenez à la page de test d'une seule vidéo, l'affiche vidéo de celle-ci ne fonctionne plus non plus.
  9. Répétez les étapes 3 à 8 pour voir à quel moment les affiches vidéo cessent de fonctionner.

Donc apparemment, à un moment donné, Mobile Safari décide qu'il ne montrera plus aucune affiche vidéo . Aussi, apparemment, mon site déclenche cette condition.

Clarifications:

Lorsque les affiches ne fonctionnent plus, cela ne se produit pas uniquement sur un domaine, aucune affiche vidéo ne sera chargée pour un autre site, qu'il s'agisse ou non d'un domaine totalement différent (par exemple, la vidéo de démonstration de http://www.videojs.com/ ).

Pour réinitialiser ce comportement, d'après ce que j'ai vu, vous devez tuer et redémarrer Safari. La fermeture et la réouverture ne réinitialise pas cet état.

Quelqu'un sait-il pourquoi cela se produit? Existe-t-il un moyen de contourner ce problème?

iosipadhtml5-videomobile-safari
32
Prody

Je l'ai fait fonctionner en utilisant un PNG au lieu d'un JPG.

Chose étrange, le JPG fonctionnait dans iOS Safari localement (via un serveur POW sur le wifi local) mais lorsqu'il était poussé à mettre en scène l'image de l'affiche ne se chargeait pas. Le code local et le code intermédiaire faisaient référence au même fichier sur S3.

Changé le format de fichier en PNG et il se charge bien.

15
Dan Weaver

Je vois que la question continue de faire l'objet d'un vote de temps en temps, mais il n'y a pas de réponse. Voici donc ce que j'ai fini par faire:

Sur iOS, au lieu d'afficher le lecteur vidéo (même avec autoload=false), Je vais juste montrer l'affiche et un bouton de lecture, deux autonomes <img> Mots clés. Quand ils sont cliqués, je crée le lecteur vidéo à partir de javascript et lui dis de jouer. Fonctionne bien, les utilisateurs ne voient pas beaucoup de différence.

2
Prody

Dans les paramètres de Safari [iOS7], les fenêtres pop-up bloquées désactivées semblaient résoudre ce problème pour moi, j'espère que cela vous aidera.

0
Tim