uni-app实现点击图片，全屏播放视频的功能

我爱模板网在使用uni-app开发app时，遇到一个需求就是视频列表默认显示图片，当点击图片的时候，全屏播放视频。研究了一番总算实现了，下面是具体的代码：

1、html

<!--视频图片列表-->
<view v-for="(item, index) in videoList" :key="index">
  <image src="/static/img/icon-video.png" @click="playMedia(item.path)"></image>
</view>
<!--隐藏的视频-->
<view v-if="isVideoPlay">
  <video id="myVideo" :src="$app.imgUrl+videoUrl" @fullscreenchange="screenChange"></video>
</view>

html效果如下：

2、js

export default {
  data() {
    return {
      videoUrl: '',
      isVideoPlay: false,
      videoContext: null,
      videoList: []
    }
  },
  onReady() {
    // 初始化视频
    this.videoContext = uni.createVideoContext('myVideo')
  },
  methods: {
    // 播放视频
    playMedia(url) {
      this.videoUrl = url
      // 这里有个延迟，否则在show的同时就执行全屏和播放，在H5下无效
      setTimeout(()=>{
        this.videoContext.requestFullScreen({direction: 0})
        this.videoContext.play()
      }, 10)
      this.isVideoPlay = true
    },
    // 根据全屏切换事件，控制视频的显示隐藏
    screenChange(e) {
      if(!e.detail.fullScreen) {
        this.isVideoPlay = false
      }
    },
  }
}