uniapp 小程序里面实现视频列表，播放当前视频，其它视频暂停，视频列表为组件形式引入。

let video = uni.createVideoContext("video"+index, this) 核心代码
video.play();

1、inde.vue 代码

<template><view class="content"><Videobox :video="video"></Videobox></view>
</template><script>import Videobox from '@/components/video/index.vue'export default {components:{ Videobox },data() {return {video:[{url:'https://www.w3school.com.cn/i/movie.mp4',},{url:'https://www.w3school.com.cn/i/movie.mp4',},{url:'https://www.w3school.com.cn/i/movie.mp4',}]}},onLoad() {},methods: {}}
</script><style lang="scss" scoped></style>

2、组件代码 components/video/index.vue

<template><view><view class="video-box" v-for="(item,index) in video" :key="index"><video class="video" :id="'video'+index" @play="videoPlay(index)" :src="item.url" controls object-fit="cover"></video></view></view>
</template><script>export default{name:"Videobox",props:{"video":{ type:Array },},data(){return{}},onShow(){},methods:{videoPlay(index){let video = uni.createVideoContext("video"+index, this)video.play();for(var i = 0; i< this.video.length; i++){if(i!=index){let video2 = uni.createVideoContext("video"+i,this);video2.pause();}}}}}
</script><style lang="scss" scoped>  image{width:100%; height:100%;} .video-box{ height: 400rpx; position: relative; margin-bottom:20rpx;        .video{width: 100%;height: 100%;}}
</style>

uniapp 小程序里面实现视频列表，播放当前视频，其它视频暂停，视频列表为组件形式引入。相关推荐

uniapp ----小程序上下滑动页面，视频自动播放（完整代码）
uniapp ----小程序上下滑动页面,视频自动播放(完整代码) <template><view class="box"><f-navbar tit ...
uni-app小程序如何获取视频时长
uni-app小程序如何获取视频时长从网上搜寻了一下发现都没有单纯获取视频时长的方法,于是只能自己研究一下了 uni-app和小程序都提供了video组件,却发现并没有提供获取视频时长属性或方法, ...
java基于微信小程序音乐播放器分享系统 uniapp 小程序
音乐播放器小程序的设计主要是对系统所要实现的功能进行详细考虑,确定所要实现的功能后进行界面的设计,在这中间还要考虑如何可以更好的将功能及页面进行很好的结合,方便用户可以很容易明了的找到自己所需要的信息 ...
[附源码]计算机毕业设计Python+uniapp基于微信小程序平台开发的音乐播放器f0rrr(程序+lw+远程部署)
[附源码]计算机毕业设计Python+uniapp基于微信小程序平台开发的音乐播放器f0rrr(程序+lw+远程部署) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置 ...
uniapp小程序如何通过虚拟列表配合节流，完成上拉刷新下拉加载，避免页面卡顿，提升性能呢？
本文将介绍uniapp小程序中如何使用虚拟列表和节流两种技术实现上拉刷新下拉加载功能,同时避免因渲染大量数据导致的页面卡顿问题. 一.虚拟列表在uniapp小程序开发中,当我们需要渲染大量列表数据时 ...
微信小程序音频相关问题：播放，录音等相关
其实我也知道音频问题,十分尴尬,可以参考的资料极少,研究者也不多,所处的教程也基本是基础的内容,稍微深入几乎一篇都没有:所以前段时间我就准备弄的东西,一直没弄,因为没资料去弄,但是今天,看到一个同学遇 ...
前端小白006：关于uniapp小程序背景音频和音频一些注意事项
前端小白006:关于uniapp小程序背景音频和音频一些注意事项全局唯一的背景音频权限申请背景音频和音频同时存在解决办法(个人推测) 个人结语全局唯一的背景音频背景音频好处就是可以后台播放 ...
uni-app小程序本地打包超过2M不能预览问题；小程序打包过大不能预览和真机调试；uni-app分包；
一.问题:我们在小程序工具中开发时候,需要本地打包,但是当本地的打包文件大于2M时候,预览的二维码就会有问题,导致真机扫码打不开或者有遗漏. 二.此时就需要开启分包 1.微信小程序每个分包的大小是2M ...
java基本微信小程序的快递代收派送系统 uniapp小程序
随着时代的发展,人们生活的节奏越来越快,但是快递已经成为人们生活中的一个重要组成部分,基本每个人都会收发快递,如果这些事情全部都到快递站点进行处理,是很浪费时间和精力的一件事情.为了能够让快递代收和派 ...
微信小程序练手项目-音乐播放器
微信小程序练手项目-音乐播放器该项目只适合练手,大佬请绕道项目展示图: 项目介绍微信小程序音乐播放器页面: 音乐推荐.播放器.播放列表功能: 播放.暂停.上一首.下一首.跳转播放列表.实时进 ...

uniapp 小程序里面实现视频列表，播放当前视频，其它视频暂停，视频列表为组件形式引入。

uniapp 小程序里面实现视频列表，播放当前视频，其它视频暂停，视频列表为组件形式引入。相关推荐

最新文章

热门文章