Utiliser dynamiquement la première image comme affiche dans une vidéo HTML5 ?

Question

Je me demande s'il existe un moyen direct d'obtenir cet effet, sans avoir besoin d'un code dorsal pour extraire une image, l'enregistrer au format jpg et la mettre dans une base de données.

Un effet par lequel la première image de la vidéo apparaît comme l'affiche lorsque la vidéo se charge serait très utile (cela ne fonctionnerait que si le navigateur peut lire la vidéo évidemment, ce qui pourrait être un peu différent de la façon dont le système de gestion de l'image est utilisé). poster fonctionne traditionnellement, mais ce n'est pas un problème.

Answer 1

Avez-vous essayé ce qui suit ?

ajoutez simplement le temps en secondes #t={secondes} à l'URL source :

  <video controls width="360">
    <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4#t=0.1" type="video/mp4" />
  </video>

J'ai choisi une fraction de seconde ( 0.1 ) pour limiter le nombre de trames, car je soupçonne que si vous mettez 1 deuxièmement, il "préchargerait" le premier 1 seconde de vidéo (c'est-à-dire 24 images ou plus ....). Au cas où...

Cela fonctionne bien sur Chrome et Firefox sur le bureau :)
Ne fonctionne pas sur Android mobile, cependant :(
Je n'ai pas encore testé sur iOS, iPhone, IE ?

Editer mai 2021 :

J'ai réalisé que de nombreux navigateurs modernes affichent maintenant automatiquement un poster de la première image.

On dirait qu'ils nous ont entendus :-)

Answer 2

Pour faire simple, vous pouvez simplement ajouter preload="metadata" à votre balise vidéo et le second du premier cadre #t=0.5 à votre source vidéo :

<video width="400" controls="controls" preload="metadata">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4#t=0.5" type="video/mp4">
</video>

Bonne chance !

Answer 3

Il existe un Popcorn.js plugin appelé Popcorn.capture qui vous permettra de créer des affiches à partir de n'importe quelle image de votre vidéo HTML5.

Il existe une limitation imposée par le navigateur qui interdit la lecture des données de pixel des ressources demandées à travers les domaines (utilisation de l'API canvas pour enregistrer la valeur actuelle d'une image). La vidéo source doit être hébergée sur le même domaine que le script et la page html qui la demande pour que cette approche fonctionne.

Le code pour créer une affiche en utilisant ce plugin est assez simple :

// This block of code must be run _after_ the DOM is ready
// This will capture the frame at the 10th second and create a poster
var video = Popcorn( "#video-id" );

// Once the video has loaded into memory, we can capture the poster
video.listen( "canplayall", function() {

  this.currentTime( 10 ).capture();

});

Answer 4

Je l'ai fait récemment pour un projet qui fonctionne sur le bureau et le mobile. L'astuce était de le faire fonctionner sur iPhone.

Réglage de preload=metadata fonctionne sur les ordinateurs de bureau et les appareils Android, mais pas sur l'iPhone.

Pour les iPhones, j'ai dû le régler sur autoplay afin que l'image du poster apparaisse automatiquement au chargement initial. Les iPhones empêcheront la lecture automatique de la vidéo, mais l'image du poster apparaîtra en conséquence.

J'ai dû faire une vérification pour l'iPhone en utilisant la réponse de Pavan trouvée ici. Détecter le navigateur de l'iPhone . Utilisez ensuite la balise vidéo appropriée avec ou sans autoplay en fonction de l'appareil.

var agent = navigator.userAgent;
var isIphone = ((agent.indexOf('iPhone') != -1) || (agent.indexOf('iPod') != -1)) ;

$videoTag = "";
if(isIphone()) {
    $videoTag = '<video controls autoplay preload="metadata">';
} else {
    $videoTag = '<video controls preload="metadata">';
}

Answer 5

Vous pouvez définir preload='auto' sur l'élément vidéo pour charger automatiquement la première image de la vidéo.