La balise vidéo HTML5 n'affiche pas l'image

Question

J'ai une balise vidéo en HTML5 pour afficher les ressources d'une application mobile. Les utilisateurs peuvent télécharger n'importe quel type de vidéo avec leurs appareils.

C'est le tag:

<video width="100%" controls autoplay onended="closeVideo(this)"> 
 
    <source src="route.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/> 
 
    <source src="route.mp4" type='video/webm; codecs="vp8, vorbis"'/> 
 
    <source src="route.mp4" type='video/ogg; codecs="theora, vorbis"'/> 
 
    Your browser can't play this kind of video, sorry. 
 
</video>

La plupart des vidéos fonctionnent correctement, mais certains d'entre eux affichent le son mais pas l'image.

Le problème ne réside pas dans les fichiers, car ils fonctionnent correctement s'ils sont téléchargés sur l'ordinateur. Je n'arrive pas à trouver un motif dans les vidéos qui ne fonctionne pas, ils ont différents formats, tailles, proportions et fps.

Merci pour vos réponses

Answer 1

Je recommande d'utiliser un service de transcodage (SYNQ.fm, Encoding.com, Amazon Elastic Transcode, Zencoder) pour convertir les vidéos que vos utilisateurs de télécharger, de cette façon vous pouvez garantir qu'ils vont jouer correctement (en supposant qu'une vidéo téléchargée n'est pas corrompue ou créée avec un codec vidéo inconnu) car vous ne pouvez pas supposer que les utilisateurs vont télécharger des vidéos qui sont déjà compatibles pour la lecture sur tous les différents appareils mobiles et navigateurs disponibles. Ainsi, votre code ressemblerait à quelque chose comme ceci:

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

Lorsque le fichier mp4 vous fournissez est encodé avec le codec H.264 et le fichier ogg fourni est codé avec le codec Ogg. En termes de transcodage, je recommande que les fichiers vidéo téléchargés sur votre système soient transcodés en mp4 et webm ou ogg. Cela permettra également de rendre votre application plus fiable en termes de lecture et puisque vous définissez les sorties vidéo, vous obtiendrez de la cohérence au lieu de différentes dimensions, fps, codecs, etc

Voici une documentation qui peut vous aider: https://www.w3schools.com/html/html5_video.asp, ce sera Indiquez également quels navigateurs sont compatibles avec quel codec vidéo et quels navigateurs prennent en charge la vidéo HTML5.