Я пытаюсь создать предварительный просмотр миниатюр из видеофайла (mp4,3gp) из формы input type='file'. Многие говорили, что это может быть сделано только на стороне сервера. Мне трудно поверить, так как я недавно наткнулся на эту скрипту, используя HTML5 Canvas и Javascript.
Единственная проблема заключается в том, что для этого требуется, чтобы видео присутствовало, и пользователь нажимал кнопку воспроизведения, прежде чем нажимать кнопку, чтобы записать миниатюру. Мне интересно, есть ли способ получить те же результаты без присутствия игрока и нажатия пользователем кнопки. Например: пользователь нажимает на загрузку файла и выбирает видеофайл, а затем генерируется миниатюра. Любая помощь/мысли приветствуются!
Canvas.drawImage должен основываться на содержимом html.
//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);
}
Преимущество этого решения заключается в том, что вы можете выбрать эскиз, который вы хотите, в зависимости от времени видео.
В последнее время это было необходимо и довольно неплохо проверили и кипятили до минимума, см. 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();