zoukankan      html  css  js  c++  java
  • video生成封面图

    根据video生成封面图,vedio要的url要允许跨域,可以设置nginx代理服务器来做

    let video = document.createElement('video');
    
    /**
     * 创建视频
    */
    export const createVideo = (src) => {
        video.setAttribute('height', '110');
        video.setAttribute('width', '110');
        video.setAttribute('preload', 'auto');
        video.setAttribute('src', src);
        video.setAttribute('x-webkit-airplay', "allow");
        video.setAttribute('autoplay', 'true');
        video.setAttribute('crossOrigin', 'anonymous');
        return video;
    }
    
    /**
     * 获取视频封面图
    */
    export const captureImage = (videoEle) => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                const canvas = document.createElement('canvas')
                let imgWidth = videoEle.videoWidth;
                let imgHeight = videoEle.videoHeight;
                videoEle.addEventListener('timeupdate', () => {
                    canvas.getContext('2d').drawImage(videoEle, 0, 0, imgWidth, imgHeight);
                    const dataUrl = canvas.toDataURL('image/png');
                    videoEle.pause()
                    resolve(dataUrl);
                }, false)
            }, 1000)
        })
    }
    
    export const getImageByVideo = (url) => {
        return captureImage(createVideo(url))
    }
  • 相关阅读:
    08月24日总结
    08月23日总结
    08月22日总结
    装饰器
    卢菲菲最强大脑记忆训练法全套教程 01
    LeetCode 704 二分查找
    LeetCode 1480 一维数组的动态和
    NIO 总结
    LeetCode 881 救生艇
    url的组成部分
  • 原文地址:https://www.cnblogs.com/windseek/p/12626981.html
Copyright © 2011-2022 走看看