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

理清楚加载顺序很重要

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;

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

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