Проблема при создании нескольких миниатюр из видео с помощью jQuery - PullRequest
Новая
       16

Проблема при создании нескольких миниатюр из видео с помощью jQuery

0 голосов
/ 24 сентября 2019

Я знаю, что этот вопрос довольно похож, но у меня есть уникальная проблема, я не знаю, сталкивались ли вы также с этим.

Вот что я хочу: я хочу создать 4 миниатюры в каждом видео, котороебыл загружен пользователем. 

1st thumbnail -> 20% of the video duration
2nd thumbnail -> 40% of the video duration
3rd thumbnail -> 60% of the video duration
4th thumbnail -> 80% of the video duration

Я уже отвечаю вышеуказанным требованиям, но моя проблема с 2-м, 3-м и 4-м эскизами, сгенерировавшими то же изображение, которое предположительно нет.

Здесьмой код: 

fileReader.onload = function() {
            var blob = new Blob([fileReader.result], {type: file.type});
            var url = URL.createObjectURL(blob);
            var video = document.createElement('video');

            var timeupdate = function() {               
                snapImage();
            };

            var snapImage = function() {
                var canvas = document.createElement('canvas');
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;

                video.currentTime = video.duration * .20;
                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
                var imageSource = canvas.toDataURL('image/png');

                video.currentTime = video.duration * .40;
                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
                imageSource = canvas.toDataURL('image/png');

                video.currentTime = video.duration * .60;
                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
                imageSource = canvas.toDataURL('image/png');

                video.currentTime = video.duration * .80;
                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
                imageSource = canvas.toDataURL('image/png');
                return true;
            };
            video.addEventListener('timeupdate', timeupdate);
            video.preload = 'metadata';
            video.src = url;
            video.muted = true;
            video.playsInline = true;
            video.currentTime = 1;
            video.play();
        };

Есть идеи по этому поводу?Пожалуйста, поделитесь своими идеями.Спасибо.

...