Создание эскиза из видеофайла с помощью ввода файла

Я пытаюсь создать предварительный просмотр миниатюр из видеофайла (mp4,3gp) из формы input type='file'. Многие говорили, что это может быть сделано только на стороне сервера. Мне трудно поверить, так как я недавно наткнулся на эту скрипту, используя HTML5 Canvas и Javascript.

Скриншот миниатюры

Единственная проблема заключается в том, что для этого требуется, чтобы видео присутствовало, и пользователь нажимал кнопку воспроизведения, прежде чем нажимать кнопку, чтобы записать миниатюру. Мне интересно, есть ли способ получить те же результаты без присутствия игрока и нажатия пользователем кнопки. Например: пользователь нажимает на загрузку файла и выбирает видеофайл, а затем генерируется миниатюра. Любая помощь/мысли приветствуются!

Ответ 1

Canvas.drawImage должен основываться на содержимом html.

источник

вот более простой jsfiddle

//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);
}

Преимущество этого решения заключается в том, что вы можете выбрать эскиз, который вы хотите, в зависимости от времени видео.

Ответ 2

В последнее время это было необходимо и довольно неплохо проверили и кипятили до минимума, см. https://codepen.io/aertmann/pen/mAVaPx

Есть некоторые ограничения, в которых он работает, но довольно хорошая поддержка браузера в настоящее время: Chrome, Firefox, Safari, Opera, IE10, IE11, Android (Chrome), Safari iOS (10 +).

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