安卓微信H5页面 video标签的poster属性 使用base64编码 不显示

Question

微信H5页面里的video标签使用视频的第一帧作为poster，代码如下：

<video @loadeddata="setPoster" :id="item.videoId" :src="item.video_address"></video>

        setPoster(e) {
            let ele = e.target;
            let canvas = document.createElement('canvas');
            canvas.width = ele.videoWidth;
            canvas.height = ele.videoHeight;
            canvas.getContext('2d').drawImage(ele, 0, 0, canvas.width, canvas.height);
            ele.setAttribute('poster', canvas.toDataURL('image/png'));
        }

在浏览器里显示的代码如下：

<video id="video31" src="../../video/ad45e737-ca9b-468d-ba17-431e6caff50a.mp4" poster="data:image/png;base64,iVBORwS2/AakF3lxZj8EHgAAAABJRU5ErkJggg=="></video>

为了把问题发出来，我把一段很长的base64编码省略成这样了：iVBORwS2/AakF3lxZj8EHgAAAABJRU5ErkJggg==
请各位大神指教，非常感谢

Answer 1

你好，请问解决了么？

Answer 2

poster属性只支持相对路径和绝对路径两种方式，所以直接用base64编码不支持吗？https://www.w3school.com.cn/tags/att_video_poster.asp

Answer 3

可以参考这篇文章 https://segmentfault.com/a/11...