uniapp视频数组,点击播放-播放当前视频,其余暂停demo效果(整理)

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,恶意文件检测 1000次 1年
对象存储 OSS,内容安全 1000次 1年
简介: uniapp视频数组,点击播放-播放当前视频,其余暂停demo效果(整理)

点击视频数组,只播放一个视频,其他视频暂停播放

<template>
  <view class="demoPage">
    <video :src="item" :id="'video'+index" @play="playVideo(index)" v-for="(item,index) in videoList" :key="index"></video>
  </view>
</template>
<script>
  export default {
    components: {},
    data() {
      return {
        videoList: [https://ysg-ma.oss-cn-qingdao.aliyuncs.com/image/0ebceb4d-72ef-4b7b-81e7-7e4edd818247.mp4,https://ysg-ma.oss-cn-qingdao.aliyuncs.com/image/b838dd89-6b48-4e02-ad24-292350f1e5fa.mp4,https://ysg-ma.oss-cn-qingdao.aliyuncs.com/image/ed5e6037-5ea1-49e5-a906-8b3fdeed2234.mp4,https://ysg-ma.oss-cn-qingdao.aliyuncs.com/image/09ac4e92-f8b5-49bd-aa24-e5ae3eeaaf17.mp4], //视频数组
        changePlay: false,
      }
    },
    // 侦听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 页面加载
    onLoad(e) {
    },
    // 页面显示
    onShow() {
    },
    // 方法
    methods: {
      //通过索引知道点击的是第几个视频
      playVideo(index) {
        console.log(index, 'index')
        let _this = this;
        //全局变量changePlay表示正在切换。每次切换完播放等一秒在恢复,解决Android下的问题
        if (this.changePlay) {
          return
        }
        _this.changePlay = true
        let currentIndex = 'video' + index; // 获取当前视频索引
        console.log("playVideo currentIndex ", currentIndex)
        // 获取视频列表
        this.videoList.forEach((item, index) => { // 获取json对象并遍历, 停止非当前视频
          let temp = 'video' + index;
          if (temp != currentIndex) { //判断名字是否一致
            // 暂停其余视频
            console.log(temp, currentIndex, '暂停播放');
            uni.createVideoContext(temp, _this).pause(); //暂停视频播放事件
          }
        })
        setTimeout(() => {
          _this.changePlay = false
        }, 1000)
      }
    },
    // 页面隐藏
    onHide() {
    },
    // 页面卸载
    onUnload() {
    },
    // 触发下拉刷新
    onPullDownRefresh() {
    },
    // 页面上拉触底事件的处理函数
    onReachBottom() {
    },
  }
</script>
相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
相关文章
|
5天前
|
移动开发 JavaScript 小程序
uniapp中间加号点击弹窗怎么实现?完整教程
uniapp中间加号点击弹窗怎么实现?完整教程
uniapp中间加号点击弹窗怎么实现?完整教程
|
6天前
uniapp点击图片预览功能?
uniapp点击图片预览功能?
|
7月前
|
存储 移动开发 开发框架
使用UniApp实现视频数组自动下载与播放功能:一步步指导
使用UniApp实现视频数组自动下载与播放功能:一步步指导
148 0
|
6天前
|
API
uniapp点击图片放大预览
uniapp点击图片放大预览
35 0
|
6天前
uniapp点击tabbar之前做判断
uniapp点击tabbar之前做判断
78 1
|
6天前
|
移动开发 小程序 前端开发
Uniapp Vue3 基础到实战 教学视频
Uniapp Vue3 基础到实战 教学视频
146 0
|
6天前
|
JavaScript
uniapp计算视频学习进程,并且下次回来继续播放(不能快进)
uniapp计算视频学习进程,并且下次回来继续播放(不能快进)
87 0
|
6天前
uniapp如何让视频无法快进
uniapp如何让视频无法快进
67 0
|
6天前
|
JavaScript
uniapp实现无法快进的视频
uniapp实现无法快进的视频
42 0
|
6天前
uniapp制作录音播放功能
uniapp制作录音播放功能
79 0

热门文章

最新文章