web-dev-qa-db-fra.com

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

Je me demande s’il existe un moyen simple d’atteindre cet effet, sans avoir besoin d’un code d’arrière-plan pour extraire une image, l’enregistrer en tant que jpg et la stocker dans une base de données quelque part.

Un effet par lequel la première image de la vidéo apparaîtrait simplement comme l'affiche lorsque la vidéo serait chargée serait très utile (cela ne fonctionnerait que si le navigateur pouvait visionner la vidéo de manière évidente, ce qui pourrait être un peu différent de la façon dont poster fonctionne traditionnellement, mais ce n'est pas une préoccupation.

javascripthtml5html5-videoposter
36
Damon

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 pixels des ressources demandées sur plusieurs domaines (utilisation de l’API de la grille 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 le demande pour que cette approche fonctionne.

Le code pour créer un poster 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();

});
19
Rick

Avez-vous essayé ce qui suit?

il suffit d’ajouter le temps en secondes# t = {secondes}à l’URL source:

<video width="300" height="150">
   <source src="testvideo.mp4#t=0.1" type="video/mp4" />
</video>

J'ai choisi une fraction de seconde ( 0.1 ) pour garder le nombre d'images petit, car j'ai le suspect que si vous mettez 1 seconde, il "préchargera" le premier 1 seconde de vidéo (c'est-à-dire 24 images ou plus ....). Au cas où ...

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

19
Juergen Fink

Je l'ai récemment fait pour un projet récent qui fonctionne sur les ordinateurs de bureau et mobiles. L'astuce consistait à le faire fonctionner sur iPhone.

La définition de preload=metadata fonctionne sur les appareils de bureau et Android, mais pas sur l'iPhone. 

Pour les iPhones, je devais le régler sur autoplay afin que l'image affiche apparaisse automatiquement lors du chargement initial. Les iPhones empêchent la lecture automatique de la vidéo, mais l’image affiche le résultat.

Je devais faire un chèque pour iPhone en utilisant la réponse de Pavan trouvée ici. Détecter le navigateur iPhone . Utilisez ensuite la balise vidéo appropriée avec ou sans autoplay en fonction du périphérique. 

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">';
}
12
drumnbace

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

6
James Westgate

Pour simplifier les choses, vous pouvez simplement ajouter preload="metadata" à votre balise video et la seconde de la première image #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!

3
coin hive

Solution pour les cadres n ° 2, n ° 3, etc. Nous avons besoin d'attacher un gestionnaire jetable .one () pour réinitialiser l'image par défaut.

<video width="300" height="150" id='my-video'>
   <source src="testvideo.mp4#t=2" type="video/mp4" />
</video>

$(function () {
     let videoJs = videojs('my-video');
     videoJs.one('play', function () {
          this.currentTime(0);
     });
});
0
Adilet Murzaliev