uni-app之video踩坑随笔

最近因项目需要入坑了uni-app，开发起来简直是到处碰壁，记录一下uni-app video 组件点击播放展示全屏的坑。

在网上找到的代码测试点击之后会先出现一个黑色的video容器，再次点击才会全屏播放视频，修改代码如下：

<view class="list_mask" @click="videoShow"></view>

这是我用来点击的按钮，放的是一张封面图，这种方法只是一种，各位如果直接放video的话可以更快捷的实现全屏效果，但是如果video展示区域很小的话，组件上的合众小控件就会很丑，追求好看的也可以试试自己放一个点击功能。

<video v-show="videoPlay" controls id="myvideo" :src="src" @fullscreenchange="screenChange"></video>

根据自己的视频地址，将src赋值即可，这里重点说一下v-show，uni-app和小程序的方法基本相似，v-if和v-show的作用我就不多说了，这里切记不能用v-if，我在这里踩了半个小时的坑，v-if会先将元素显示出来，再次点击才会全屏播放，使用v-show这种情况就不会出现了，所以特别强调一下，给被v-if坑了的小伙伴提个醒。

下边就是展示全屏及播放的方法了：

videoShow() {
    let _this = this;
    _this.videoPlay = true;
    _this.videoContext = uni.createVideoContext("myvideo", _this);
    _this.videoContext.requestFullScreen();
    _this.videoContext.play();
},
screenChange(e) {
    let _this = this;
    let fullScreen = e.detail.fullScreen;
    if (!fullScreen) {
        _this.videoContext.pause();
        _this.videoPlay = false;
    }
},

代码没啥难度，就是要用对方法，记录一下，长长记性！！！