Создать миниатюру из видеофайла через файловый ввод

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

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

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

Есть некоторые ограничения, где это работает, но в настоящее время довольно хорошая поддержка браузеров: 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();

Недавно это было необходимо, поэтому я написал функцию, которая берет видео file и желаемое timestamp и возвращает image blob в это время видео.

Пример использования:

try {
    // get the frame at 1.5 seconds of the video file
    const cover = await getVideoCover(file, 1.5);
    // print out the result image blob
    console.log(cover);
} catch (ex) {
    console.log("ERROR: ", ex);
}

Функция:

function getVideoCover(file, seekTo = 0.0) {
    console.log("getting video cover for file: ", file);
    return new Promise((resolve, reject) => {
        // load the file to a video player
        const videoPlayer = document.createElement('video');
        videoPlayer.setAttribute('src', URL.createObjectURL(file));
        videoPlayer.load();
        videoPlayer.addEventListener('error', (ex) => {
            reject("error when loading video file", ex);
        });
        // load metadata of the video to get video duration and dimensions
        videoPlayer.addEventListener('loadedmetadata', () => {
            // seek to user defined timestamp (in seconds) if possible
            if (videoPlayer.duration < seekTo) {
                reject("video is too short.");
                return;
            }
            // delay seeking or else 'seeked' event won't fire on Safari
            setTimeout(() => {
              videoPlayer.currentTime = seekTo;
            }, 200);
            // extract video thumbnail once seeking is complete
            videoPlayer.addEventListener('seeked', () => {
                console.log('video is now paused at %ss.', seekTo);
                // define a canvas to have the same dimension as the video
                const canvas = document.createElement("canvas");
                canvas.width = videoPlayer.videoWidth;
                canvas.height = videoPlayer.videoHeight;
                // draw the video frame to canvas
                const ctx = canvas.getContext("2d");
                ctx.drawImage(videoPlayer, 0, 0, canvas.width, canvas.height);
                // return the canvas image as a blob
                ctx.canvas.toBlob(
                    blob => {
                        resolve(blob);
                    },
                    "image/jpeg",
                    0.75 /* quality */
                );
            });
        });
    });
}

С jQuery Lib вы можете использовать здесь мой код. $ video - это элемент Video. Эта функция возвращает строку

function createPoster($video) {
    //here you can set anytime you want
    $video.currentTime = 5;
    var canvas = document.createElement("canvas");
    canvas.width = 350;
    canvas.height = 200;
    canvas.getContext("2d").drawImage($video, 0, 0, canvas.width, canvas.height);
    return canvas.toDataURL("image/jpeg");;
}

Пример использования:

$video.setAttribute("poster", createPoster($video));

Самый простой способ отобразить эскиз - использовать сам тег <video>.

<video src="http://www.w3schools.com/html/mov_bbb.mp4"></video>

Используйте #t в URL-адресе, если вы хотите, чтобы эскиз длился x секунд.

E.g.:

<video src="http://www.w3schools.com/html/mov_bbb.mp4#t=5"></video>

Убедитесь, что он не включает никаких атрибутов, таких как autoplay или controls, и не должен иметь тег source в качестве дочернего элемента.