H5页面的video自动实现poster效果和兼容各个端的播放

移动端的页面里如果有video标签，根据官方文档上写着，没有加poster的话，就自动采用视频第一帧作为poster。

需求: 从接口得到的富文本编辑器产出的的一串字符串标签，用react的dangerouslySetInnerHTML 实现插入，但是里面的video标签，在移动端各个浏览器上表现有差异

实际情况：在ios上大部分浏览器都不会自动加载视频第一帧作为poster，ios上表现为一个大播放按钮在中间，然后播放器其他区域全是空白，安卓机上则表现良好，

过程：

查阅相关资料，得出解决方案是，用canvas加载video第一帧渲染一个base64的image作为poster，尝试了后失败，canvas报错因为资源跨域，被污染无法转image，即便video设置了跨域也不行，资源的获取上也是设置了跨域的
换了种思路，不使用第一帧，使用第0.1秒作为封面，只要在src后面加上#t=0.1即可自动加载到第0.1秒，实现了poster效果，比如<video src="xxxxxx.mp4#t=0.1" />，试了一下大部分ios上的移动浏览器都支持，支持极为良好。

3.发现微信自带的浏览器不支持自动播放(就是手机上直接从微信点开一个链接打开的浏览器)，我擦
查阅资料后得知，需要加一个监听，实现自动播放

 document.addEventListener("WeixinJSBridgeReady", function (){ 
    document.getElementById('video').play()
}, false)

但是我要的是实现poster效果，不是自动播放，所以要在play后给他暂停

 document.addEventListener("WeixinJSBridgeReady", function (){ 
    document.getElementById('video').play();
    document.getElementById('video').pause();
}, false)

这种方法对于写死的video有效果，但是我的video是从接口拿到的字符串，有一定的延迟，好像是WeixinJSBridgeReady只会触发一遍，如果接口慢了可能就，video还没生成就调play和pause，会有问题

于是在一对父子组件里分别都监听了这个事件，但是子组件一直触发不了，父组件则能触发，
因为子组件是通过接口返回了数据才去渲染的，而父组件页面一加载就有，WeixinJSBridgeReady只会触发一次，子组件里面设置监听的时候，已经迟了，不会再触发了
子组件需要这样判断去触发，在didmount的时候去判断，然后按照下面的去调用，在回调函数里去播放和暂停，实现poster效果

componentDidMount = () => {
        if (window.WeixinJSBridge) {
            window.WeixinJSBridge.invoke('getNetworkType', {}, e => {
                document.querySelector('video').play();
                document.querySelector('video').pause();
            }, false);
        }
    }

对于其他端，需要给src后面加上#t=0.1，并且设置默认内联播放，不脱离文档流，因为很多安卓浏览器都会劫持video标签，在播放的时候自动调用原生播放器，提升性能，对于交互有严格要求的产品来说，这个是要干掉的。所以需要加一些属性，由于是在字符串里面的标签里加，如果用正则匹配替换，会非常不方便，所以用下面的方法

setVideoHTML = () => {
        const {innerHTML} = this.props;
        const div = document.createElement('div');
        div.innerHTML = innerHTML;
        div.querySelectorAll('video').forEach(video => {
            video.src += '#t=0.1';
            video.setAttribute('playsinline', 'true');
            video.setAttribute('autoplay', 'false');
            video.setAttribute('preload', 'auto');
            video.setAttribute('webkit-playsInline', 'true');
            video.setAttribute('x-webkit-airplay', 'allow');
            video.setAttribute('x5-video-player-type', 'h5');
            video.setAttribute('x5-video-player-fullscreen', 'true');
            video.setAttribute('x5-video-orientation', 'portraint');
        });
        return div.innerHTML;
    }

这里好像只能用setAttribute方法，我试了一下直接加没生效，这样子调用后，得到的还是一串字符串，但是里面对应的内容都被替换修改了，就可以正常用了

<div dangerouslySetInnerHTML={{__html: this.setVideoHTML()}}/>

最后编辑于：2021.04.02 16:51:41