获取视频的第一帧

芋圆社区 > 编程 > JavaScript > 获取视频的第一帧

707

2023-08-30

Hey、小怪兽

• 之前芋圆社区上线了芋圆社区x公主连结的页面，里面有单个角色展示的页面，之前上线的时候会有2个问题：
- 有些角色的MP4特别大，比如20MB，那么在获取视频的时候页面会长期处于白屏的状态
- 从QQ打开这个个人角色页面的时候，视频总是会另外弹出一个窗口进行播放，而不是处于背景
• 我看MP4提供了一个poster的属性，在视频未播放的时候可以当成封面，但是如果要找这么多角色的封面图片非常麻烦，所以我选择了自己获取第一帧图片渲染上去
• 在我的背景div里增加一个img：

<div class="taro-pcr-bg">
    <video muted loop autoplay>
        <source src="/static/pcr/mp4/{{ pcr.UUID }}.mp4" type="video/mp4"/>
    </video>
    <img src="" id="taro-pcr-video-poster" alt="">
</div>

• 接着写Less，video和图片都是不可见的：

.taro-pcr-bg {
    pointer-events: none;
    video, img {
        display: none;
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        pointer-events: none;
    }
}

• 获取这两个元素，onloadeddata是视频已经渲染完第一帧的时候，将视频丢进getVideoFrame方法里，将图片展示出来

const video = document.querySelector("video");
const poster = document.getElementById("taro-pcr-video-poster");

video.onloadeddata = async () => {
    const frameObj = await getVideoFrame(video);
    poster.src= frameObj.url;
    poster.style.display = "block";
};

// 获取视频帧
const drawVideo = (video) => {
    return new Promise((resolve) => {
        const cvs = document.createElement("canvas");
        const ctx = cvs.getContext("2d");
        cvs.width = video.videoWidth;
        cvs.height = video.videoHeight;
        ctx.drawImage(video, 0, 0, cvs.width, cvs.height);

        cvs.toBlob((blob) => {
            resolve({
                blob,
                url: URL.createObjectURL(blob),
            });
        });
    });
};

• 最后，当视频可以播放的时候，如果是在电脑端，那就显示MP4，如果是手机端，就将视频移除，不然它另外弹出窗口播放，而是只用图片当背景：

video.oncanplay = () => {
    if (window.innerWidth > 1080) {
        video.style.display = "block";
    } else {
        video.pause();
        video.remove();
    }
};

• 这里有个不解的地方，当加载MP4当背景的时候，应该不会等全部加载完再显示，而是加载差不多了就显示，只是是静态的图片，所以这个方法可能是徒劳？但是实际感觉页面加载看到图片的速度快了一些

上一篇：公主连结.cysp转.skel

下一篇：定制Console.log

获取视频的第一帧

回复