web-dev-qa-db-fra.com

<vidéo> joue dans les autres navigateurs, mais pas Safari

Nous avons une vidéo MP4 sur notre site; il joue bien dans IE9 +, Firefox, Chrome et Chrome sur mac. Cependant, sur Safari, la vidéo ne se lit pas du tout. Elle déclenche un événement "bloqué" puis rien ne se charge. Je publierais notre code HTML, mais j’ai approfondi le problème en constatant que Safari ne le lirait pas même lors de la navigation vers l’URL du MP4 original. Une fois téléchargée et lue localement, la vidéo fonctionne correctement dans Quicktime.

La partie la plus étrange de cela est celle de tous nos développeurs,Ipeut faire en sorte que la vidéo fonctionne sur Safari lorsque je lance le serveur associé à partir de mon ordinateur de développement. De plus, d'autres fichiers MP4 du même répertoire ont un problème similaire. Cela a été la clé pour moi, et je cherchais une petite différence dans la façon dont les vidéos sont transférées du serveur - en-têtes de demande/réponse, taille exacte du fichier, etc. 

En-têtes copiés à partir de Chrome (uniquement parce qu'il est plus difficile de copier/coller depuis Safari)

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
DNT:1
Host:*************:8443
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36

Response Headers
Accept-Ranges:bytes
Content-Length:44875102
Content-Type:video/mp4;charset=UTF-8
Date:Tue, 30 Dec 2014 21:11:51 GMT
ETag:W/"44875102-1419959755000"
Last-Modified:Tue, 30 Dec 2014 17:15:55 GMT
Server:Apache-Coyote/1.1

(En outre, juste au cas où cela vous rappellerait un problème plus ancien, Safari sous Windows est mort depuis des siècles. Ce problème se produit sous OS X)

EDIT: Nouvelle information qui pourrait aider un peu. J'ai pris une vidéo personnelle de mon propre serveur Web, qui a ensuite été en mesure de fonctionner avec les navigateurs problématiques de Safari en question, et je l'ai téléchargée dans le répertoire vidéo local de notre serveur. À partir de là , il rencontre le même problème que nos autres vidéos. Cela laisse à penser que le MP4 lui-même n'a peut-être pas d'importance - il s'agit probablement d'un problème de serveur avec notre serveur Web Tomcat 7. Nous avons les types de contenu correctement enregistrés, ce qui couvre au moins les bases, mais je suis curieux de savoir s’il existe d’autres éléments nécessaires.

INFORMATIONS SUPPLÉMENTAIRES: Je ne pensais pas mentionner cela au départ, mais nous chargeons nos pages Web et nos vidéos via une connexion HTTPS. La plupart de nos serveurs de test ne possèdent pas de certificats valides et nous devons donc cliquer sur le navigateur standard en avertissant que «Ce serveur n'est peut-être pas ce qu'il dit». Nous examinons actuellement les éléments nécessaires pour disposer de certificats corrects sur tous nos serveurs.

10
Katana314

Assurez-vous que controls = 'true' type = 'video/mp4' est indiqué dans votre code html.

<video loop controls='true' width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
3
John Hua

J'ai téléchargé un nouveau fichier MP4, mais il ne jouait que dans SAFARI (sur mon MAC et mon iPhone), pas sur Chrome, Oasis, Firefox ou Brave. Le code HTML était identique aux succès précédents. La taille du fichier et les dimensions étaient bien. Mais les codecs sur les anciens fichiers de travail étaient "H.264, AAC". Les codecs sur les nouveaux fichiers qui ne fonctionnaient pas étaient "MPEG-4, AAC". J'édite mes fichiers vidéo sur VideoPad. J'ai donc examiné les sélections de spécification dans les options "Exporter le fichier sous" et, bien entendu, les codecs ont été définis par défaut sur MPEG-4. J'ai sélectionné H.264 et exporté le fichier. Téléchargé sur AWS et rendu public. Nouvelle tentative de mes nouveaux fichiers dans les quatre navigateurs défaillants et BINGO !, ils ont tous fonctionné. Il y a un dieu!

2
David Shoup

Safari exige que le serveur prenne en charge les plages d'octets et il ignore également le type mime de préférence à un suffixe de type de fichier.

S'il vous plaît voir ma réponse à https://stackoverflow.com/a/51901198/1047992

1
David

Cela pourrait en effet être un problème de prise en charge de plage d'octets manquante, selon la version que vous utilisez. Il a été ajouté à DMSDownloadServlet dans MAGNOLIA-3855 (correctif Magnolia version 4.4.6).

1
user667

S'il vous plaît, pardonnez-moi si vous résolvez déjà ce problème! J'ai pu résoudre ce problème en utilisant POSTMAN/INSOMNIA pour vérifier les en-têtes que mon serveur envoie. Chrome peut tromper votre, une fois que dans ce navigateur, la vidéo fonctionne bien!

Si la vidéo ne se trouve pas dans la plage (requête vidéo complète), votre serveur doit renvoyer l'état (200) et l'exécuter si le paramètre "Accept-Ranges: bytes" est envoyé depuis votre serveur . Exemple d'état d'en-tête 200:

Server: nginx
Date: Wed, 25 Jul 2018 17:34:18 GMT
Content-Type: video/mp4
Content-Length: 22995782
Connection: keep-alive
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, PATCH, DELETE
Access-Control-Allow-Headers: X-Requested-With,content-type
Access-Control-Allow-Credentials: true
Accept-Ranges: bytes

si la vidéo est associée à une plage, votre serveur doit renvoyer l’état (206) avec les en-têtes de plage correctement.

Server: nginx
Date: Wed, 25 Jul 2018 18:13:07 GMT
Content-Type: video/mp4
Content-Length: 1023
Connection: keep-alive
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, PATCH, DELETE
Access-Control-Allow-Headers: X-Requested-With,content-type
Access-Control-Allow-Credentials: true
Accept-Ranges: bytes
Content-Range: bytes 1-1023/22995782

J'espère que cela vous aidera! Mes meilleures salutations, Paulo Durço

0

Récemment, mon équipe a rencontré un problème particulier qui a entraîné le même comportement. Nous utilisions Apache 2.4 et avons remarqué que si nous avions une couche d'authentification telle que .htpasswd activée, Safari n'afficherait aucune vidéo, même après l'authentification. C'est presque comme si elle ne continuait pas à respecter l'autorisation de l'authentification initiale pour certains types de demandes HTTP ultérieures.

Désolé, je n'ai rien de plus technique à fournir, mais c'est quelque chose à vérifier pour les personnes rencontrant des problèmes vidéo uniquement dans Safari.

0
RedYetiCo

...

Sur une note de côté, charset a-t-il un sens sur le type vidéo/mp4? Essayez de supprimer le jeu de caractères dessus.

EDIT: Oui, charset peut être le problème, voir: Spécifier le type de contenu pour les documents chargés dans Magnolia

EDIT2: Pas de jeu de caractères, woops, échec de la compréhension en lecture. Peut-être une plage d'octets? Pour citer "[...] nous avons découvert que Safari/iOS" utilise des plages d'octets HTTP pour demander des fichiers audio et vidéo. " supporte cette fonctionnalité, et donc le streaming échoue. "

0
Nexii Malthus

Que se passe-t-il si vous les ajoutez à votre .htaccess?

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
0
neokio

J'ai rencontré le même problème et l'ai résolu, mais aucune autre réponse ici n'est impliquée, alors je resterai la solution ici pour quelqu'un qui suit.

J'ai créé mon propre serveur de diffusion vidéo en continu, qui, dans le cas en question, renvoie simplement un fichier mp4 "Ranged", et Safari ne lit pas les vidéos acheminées dans la réponse HTTP sans en-tête de réponse "Connection" pour une raison quelconque.

0
findall