QQ浏览器video标签不显示第一帧解决

因为在QQ和微信上打开网址链接都是用QQ浏览器打开的，但QQ浏览器做了很多限制还存在一些问题，导致一些功能不能正常使用，就像下面这个video标签一样显示不出来第一帧

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ly4FbIa5-1599532123748)(/img/bVbMzo6)]

一、尝试前端解决

视屏加载完成，获取第一帧作为poster海报

当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件。

<video controls width="270" src="./images/movie.mp4"></video>

<script type="text/javascript">
    $('video').each(function() {
        this.addEventListener('canplaythrough', function() {
            setTimeout(function() {
                var canvas = document.createElement('canvas');
                canvas.width = this.videoWidth;
                canvas.height = this.videoHeight;
                canvas.getContext('2d').drawImage(this, 0, 0, canvas.width, canvas.height);
                this.setAttribute('poster', canvas.toDataURL("image/png"));
                // $('body').append(`<img src="${canvas.toDataURL("image/png")}" />`);
            }.bind(this), 1000);
        }.bind(this));
    });
</script>

可惜的是QQ浏览器对canvas的toDataURL方法支持不够好，直接输出data:,就没了

二、后端解决（推荐）

后端可以劫持到上传的视频，然后对视屏进行截取，不过这又要增加后端的工作量了，还好现在都使用了云存储（OSS），
以阿里云为示例，截取上传视屏

阿里云视频截帧API文档：https://help.aliyun.com/document_detail/64555.html?spm=a2c4g.11174283.6.1745.6f3e7da20srJTp

语法：

<原视频URL>?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast

需要注意的是这里的截取宽高指定0就行了，自动计算视屏宽高为截取图片的宽高

欢迎关注：http://fenxianglu.cn/