h5直播和小程序直播使用video标签造成字幕被视频遮住覆盖的以及手机适配的问题解决方法

道路千万条，安全第一条

改了好多，之前用web也做过，但都没遇到这么多问题，这次是用百度小程序做的直播单间

坑不是很多，是到处都是

话不多说，看解决方法

————————————————————————

理清楚加载顺序很重要

1，让video标签最先渲染

在vue或者小程序中先这样 ：

onReady:function () {

    this.videoContext = swan.createVideoContext('video-box')；

},

解释：

this.videoContext = swan.createVideoContext('video-box')；

这句是百度小程序的官方写法，video-box是video标签的id;

2，直播间里面是字幕什么，聊天什么的，放在video标签里面

记得用cover-view，原生标签，

然后给里面所有cover-view放在最后渲染，一般来说，视图渲染都是顺序读取的，

用条件控制他们不要渲染呗，

————————————————

<cover-view class="online-number1" s-if="isShow">

      <cover-imagesrc="../../resource/img/heart.png"></cover-image>

       <cover-viewclass="curent_name">您的昵称:{{user_name}}</cover-view>

</cover-view>

————————————————

解释：isShow 初始值为false;

3，在onshow的方法里，也就是小程序和vue所谓的视图那里最后改写这个isShow的值为true;

真金不怕火炼，来吧，看效果

http://www.taoxtao.cn/archives/1983