mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-22 02:11:44 +03:00
3231abd0ae
refs https://github.com/TryGhost/Team/issues/1229 - mostly mirrors image card functionality but rebuilt with more modern syntax - when uploading a video the size and duration is extracted along with a screen capture of the video from 0.5s in, the screen capture is uploaded once the video finishes because we need to use the uploaded video url as a reference to attach it as a thumbnail via the API - the captured screenshot is currently what's shown in the card To be implemented: - "incomplete" state when video has been uploaded but not a thumbnail - uploader in settings panel to change the video thumbnail - play button overlay _or_ switch to `<video>` so it can be previewed
45 lines
1.2 KiB
JavaScript
45 lines
1.2 KiB
JavaScript
export default function extractVideoMetadata(file) {
|
|
return new Promise((resolve, reject) => {
|
|
let duration, width, height;
|
|
|
|
const video = document.createElement('video');
|
|
video.preload = 'metadata';
|
|
video.muted = true;
|
|
video.playsInline = true;
|
|
|
|
video.onerror = reject;
|
|
|
|
video.onloadedmetadata = function () {
|
|
duration = video.duration;
|
|
width = video.videoWidth;
|
|
height = video.videoHeight;
|
|
|
|
setTimeout(() => {
|
|
video.currentTime = 0.5;
|
|
}, 200);
|
|
};
|
|
|
|
video.onseeked = function () {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.drawImage(video, 0, 0, width, height);
|
|
|
|
window.URL.revokeObjectURL(video.src);
|
|
|
|
ctx.canvas.toBlob((thumbnailBlob) => {
|
|
resolve({
|
|
duration,
|
|
width,
|
|
height,
|
|
thumbnailBlob
|
|
});
|
|
}, 'image/jpeg', 0.75);
|
|
};
|
|
|
|
video.src = URL.createObjectURL(file);
|
|
});
|
|
}
|