JS --- video 获取视频第一帧

Posted 2021-09-14 Tong_sunshine

一般直接设置封面图 后台上传 前端取 用poster

<div class="websocket">
    <!--  poster="http://9haoguoji.oss-cn-beijing.aliyuncs.com/product/1619083692180048808.jpg" 设置 封面图 -->
    <video id="video1" style="background: #ccc"  controls="controls">
        <source src="123.mp4"  type="video/mp4">
    </video>
</div>

<script type="text/javascript">
    getVideoBase64(\'123.mp4\')
    function getVideoBase64(url) {
       /* return new Promise(function(resolve, reject) {*/
            let dataURL = \'\';
            let video = document.createElement("video");
            video.setAttribute(\'crossOrigin\', \'anonymous\'); //处理跨域
            video.setAttribute(\'src\', url);
            video.setAttribute(\'width\', 400);
            video.setAttribute(\'height\', 240);
            video.addEventListener(\'loadeddata\', function() {
                let canvas = document.createElement("canvas"),
                    width = video.width, //canvas的尺寸和图片一样
                    height = video.height;
                canvas.width = width;
                canvas.height = height;
                canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
                dataURL = canvas.toDataURL(\'image/jpeg\'); //转换为base64
                $(\'#video1 source\').attr(\'src\', dataURL)
                //resolve(dataURL);
            });
        /*})*/
    }
</script>

本地可以 线上会有跨域问题 如果用的阿里服务器 后台取消跨域