vsc写uni 关于video的使用

video是H5新增的多媒体元素

前几天在写的时候刚好遇到这个需求，就赶紧记一下，方便以后查找

这就是那个项目的小视频，这类的需求很简单，点击播放，再点第二个让第一个关闭嘛，说的简单，却让我迷茫一整天，哎~ ，下面是我个人的思路，应该很好理解

个人理解

1. 点击的时候传参数，我选的参数是下标还有id
   我为什么用image呐，是因为我的播放是自定义的，不是API自带的，自带的那个不咋好看，就直接写了一个，v-if判断的是图片显示隐藏，默认为true，开始就让他显示

 <image src="../../static/video-bofang.png" class="img" v-if="it.play_but" @click="flag(index, it._id)" />

2.接受时先声明两个变量，一个存id，一个存下标

// 下标用于判断图片的隐藏和显示还有状态栏
const _index = ref(-1)
// id 用来判断那个视频播放
const _ids = ref('')

3.传参后先不存id和下标，这样方便我们对第一次点击的判断，我用的是vue3+ts的方法写的,MVlis是我的全部视频数据,MVlist.value[i]:全部数据的 第 i 项，让图片隐藏，状态栏显示 mvnextbf()是我播放的方法

const flag = (i: number, id: any) => {
    // const videoContext = uni.createVideoContext(id);
    // 通过下标将状态栏显示，
    MVlist.value[i].controls = true
    // 通过下标将图片隐藏
    MVlist.value[i].play_but = false
    //方法
    mvnetxbf(i, id)
}

4.重点来了，我们先判断声明的_ids有没有id，我先判断没有，那说明我们点击的是第一个，这个时候，我们在存id和下标，并且通过uni.createVideoContext API后面跟的是要播放的id，API方法一.play()：播放,
具体怎么用还是要看文档，我说的是按我的理解来写的

const mvnetxbf = (i: any, id: any) => {
    /*
    判断id里面是否有数据，没有就是第一次，然后存入第一次点击的下标和id，并执行该id的视频
    */
    if (_ids.value === '') {
        _index.value = i
        _ids.value = id
        uni.createVideoContext(id).play()
    } else {
        // 将第一次的图片显示和状态栏隐藏，并结束
        if (_ids.value != id) {
            uni.createVideoContext(_ids.value).pause()
            MVlist.value[_index.value].controls = false
            MVlist.value[_index.value].play_but = true
            // 存入新id和下标,并执行
            setTimeout(() => {
                _index.value = i
                _ids.value = id
                uni.createVideoContext(id).play()
            }, 600)
        }
    }
}

当然了，有 if 就有 else 当我们判断的 _ids存在数据时，那我们就继续判断，判断存的id 和 新传的 id 是否一致，当不一致的时候，用pause()方法暂停

uni.createVideoContext(_ids.value).pause()

注意我在API 后面拼的id，我用的是存的id 而不是 传参的id 两个的区别是，一个是上一条的id 一个是现在的id，我们要结束的是上一条的id 的视频，我们存的是上一条的id，新 id 我们没有存，说明了变量里的是旧的id 不是新的id ，当我们暂停了上一条id 的视频，隐藏了状态栏，显示了播放图片，这个时候，我们再存id，这个时候的id，就是新的id 然后我们再执行第一步，,MVlist.value[i]:全部数据的 第 i 项，让图片隐藏，状态栏显示

 setTimeout(() => {
            _index.value = i
            _ids.value = id
            uni.createVideoContext(id).play()
      }, 600)

这个时候的id就是第二条的id，当我们在次点击的时候，新id 就是第三条id，我们判断的依旧是新id 和旧id 不一样就结束第二套条id，执行第三条，我用了定时器，让子弹飞一会

我这个方法比较简单，功能也不是很全，所以还是有点小bug的，但是一般要求不高的应该是可以用的，如果哪位客官有新的看法，我们可以一起讨论讨论

结束