web-dev-qa-db-fra.com

Créer une miniature à partir d'un fichier vidéo via l'entrée de fichier

J'essaie de créer un aperçu miniature à partir d'un fichier vidéo (mp4,3gp) à partir d'un formulaire input type='file'. Beaucoup ont dit que cela ne pouvait se faire que côté serveur. Je trouve cela difficile à croire depuis que je suis récemment tombé sur ce Fiddle utilisant HTML5 Canvas et Javascript.

Violon miniature

Le seul problème est que cela nécessite que la vidéo soit présente et que l'utilisateur clique sur lecture avant de cliquer sur un bouton pour capturer la miniature. Je me demande s'il existe un moyen d'obtenir les mêmes résultats sans que le joueur soit présent et que l'utilisateur clique sur le bouton. Par exemple: l'utilisateur clique sur le téléchargement de fichier et sélectionne le fichier vidéo, puis la miniature est générée. Toute aide/réflexion est la bienvenue!

javascripthtml5videothumbnailsvideo-thumbnails
32
ryan

Canvas.drawImage doit être basé sur du contenu html.

source

voici un jsfiddle plus simple

//and code
function capture(){
    var canvas = document.getElementById('canvas');
    var video = document.getElementById('video');
    canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
}

L'avantage de cette solution est que vous pouvez sélectionner la vignette de votre choix en fonction de l'heure de la vidéo.

60
Giu

J'en avais récemment besoin et j'ai fait pas mal de tests et de les réduire au strict minimum, voir https://codepen.io/aertmann/pen/mAVaPx

Il y a quelques limitations où cela fonctionne, mais le support du navigateur est assez bon actuellement: Chrome, Firefox, Safari, Opera, IE10, IE11, Android (Chrome), iOS Safari (10+).

 video.preload = 'metadata';
 video.src = url;
 // Load video in Safari / IE11
 video.muted = true;
 video.playsInline = true;
 video.play();
14
Aske Ertmann