uniapp video视频组件 在同一个页面 点击一个视频播放，让另一个正在播放的视频暂停

最新推荐文章于 2023-09-12 19:09:56 发布
最新推荐文章于 2023-09-12 19:09:56 发布
阅读量753 收藏
点赞数 3
文章标签： uni-app 微信小程序 java vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73359597/article/details/132184033
版权

循环的是 video组件 上一级的列表  所以 video没有加循环

核心代码

在methods里面加

 

 

The0003
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app-video(支持后台播放音频的视频播放器).zip
10-16
总结来说，uni-app-video组件是uni-app生态中的重要组成部分，它为开发者提供了高效、便捷的视频播放解决方案，特别是在处理后台音频播放这一需求时，大大简化了开发流程，提高了应用的竞争力。通过熟练掌握uni-app-...
uniapp subNvue 写的视频播放
最新发布
11-03
其中，subNvue是uniapp的一个特色功能，主要用于处理页面中的子组件，特别是对于性能要求较高的场景，如视频播放。下面我们将深入探讨如何使用uniapp的subNvue来实现高效、功能丰富的视频播放功能。 1. **uniapp与...
uniapp 微信小程序video标签点击触发父标签的事件
m0_70798249的博客
09-12 677
该问题是因为事件冒泡，但是video标签的播放按钮是标签自带的，不方便我们阻止事件的传播，我的思路：在video标签外再套一层盒子，在该盒子上组织事件的传播。uniapp使用不是很多再此记录方便下次使用。从网上看了很多案例，但都解决不了我的问题。在uniapp中，可以通过添加。属性来阻止事件冒泡。
uniapp 多个视频时播放当前视频暂停其他视频解决方案
qq_36935391的博客
03-02 1474
.vue 文件 <video :data-id="item.id" :key="item.id" :id="'video'+item.id" :src="item.videoUrl" object-fit:fill enable-danmu danmu-btn controls webkit-playsinline playsinline x5-video-player-type="h5" x5-video-orientatio...
uniapp中video视频手动控制播放和暂停
qq_40591925的博客
03-16 1万+
html: <video id="myVideo" :src="liveBackplay_url"></video> js: this.videoContext = uni.createVideoContext('myVideo');//创建视频实例指向video 使用： this.videoContext.play(); 播放 this.videoContext.pause(); 暂停
uniapp视频数组，点击播放-播放当前视频，其余暂停demo效果（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
10-10 1573
uniapp视频数组，点击播放-播放当前视频，其余暂停demo效果
uniapp实现点击播放功能
AAuchina的博客
06-28 1506
以上是一个简单的uni-app实现点击播放功能的示例，你可以根据实际需求和项目结构进行适当的调整和修改。在实际开发中，你可能需要使用具体的视频或音频播放插件来实现更高级的功能，例如uni-AD/video插件、uni-AD/audio插件等，可以根据插件提供的API来进行具体的播放操作。时，按钮文本显示为"暂停"，并显示"视频正在播放"的文本。在uni-app项目中创建一个"播放器"页面或组件。在data中添加一个变量，用于控制播放状态。的值，可以在模板中切换按钮显示的文本或样式。// 其他播放操作…
uni-app 自定义组件展示html富文本内容，可实现富文本html内容中 图片展示、视频播放、音频播放。
06-10
自定义组件需要解析JSON中的视频源URL和其他属性，如controls、autoplay等，并结合<video>组件的API实现播放、暂停、全屏等控制。 3. 音频播放：类似视频，音频播放可以通过组件实现。解析JSON中的音频源和相关属性...
uniapp 仿抖音上下滑动视频.zip
03-12
2. 视频播放：uniapp提供了video组件用于播放视频，可以设置视频源（src）、封面（cover-image）、自动播放（autoplay）等属性，以满足基本的视频播放需求。 3. 滑动事件监听：通过监听滑动事件（如scroll、...
uniapp 微信端 仿淘宝 视频+图片 轮播(一比一还原)
10-22
在本教程中，我们将深入探讨如何使用uniapp框架在微信小程序上实现一个视频与图片结合的轮播功能，以此来一比一地复刻淘宝应用中的相似设计。uniapp是一个跨平台的开发工具，它允许开发者用一套代码库构建iOS、...
uniapp 小程序里面实现视频列表，播放当前视频，其它视频暂停，视频列表为组件形式引入。
神夜空间
11-27 4640
let video = uni.createVideoContext("video"+index, this) 核心代码 video.play(); 1、inde.vue 代码 <template> <view class="content"> <Videobox :video="video"></Videobox> </view> </template> <script> import V...
vue 控制video视频的播放暂停（多个视频）
林中明月间丶
01-08 8879
https://www.jb51.net/article/173792.htmvue视频播放暂停代码 https://www.jianshu.com/p/d5ff26717cd5vue + video.js实现视频列表页（多个视频） 安装video.js $ npm install video.js import Video from 'video.js' // imp...
uniapp页面切换时暂停video视频播放并卸载资源
outgoing7的博客
05-11 1744
uniapp页面切换时暂停video视频播放并卸载资源
微信小程序video标签如何在其他视频播放时让另一个视频暂停播放-demo
JackieDYH的博客
04-24 1498
一个页面同时有很多视频播放，当用户点击一个视频后，开始播放视频，当点击另一个视频后，暂停前一个播放视频，让当前页面只有一个视频处于播放状态。播放视频时，先判断当前是否有视频正在播放，如果没有，则播放，如果有，则暂停其他视频，再播放当前视频。
uniapp小程序点击按钮打开图片/全屏播放视频组件
greendx的博客
11-22 3972
uniapp小程序点击按钮打开图片/全屏播放视频组件
uni-app阻止多个视频一起播放的解决
liyr_zwx的博客
04-26 831
多个视频一直播放，比较混乱 如图所示 代码如下： template: <view class="imgCard" v-if="item.video!=null"> <video class="imgOrVideo" :data-id="index.toString()" @play="playVideo" :data-url="imageAddress+item.video" :src="imageAddress+item.video" @click.stop='nothing()'
uniapp实现视频上下滑动功能（小程序）以及video组件的暂停和播放
热门推荐
摸鱼小队
11-25 1万+
uni推荐使用swiper组件实现，在video组件的下面介绍有写。 **这里实现方式是：**父组件先用swiper组件实现纵向滑动，然后在每个swiper-item中插入视屏组件video-item-vx，在video-item-vx组件中实现视屏播放，具体别的细节根据需要自己实现。 一、视屏屏纵向上下滑动 1、父组件html <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :in
vue 轮播图多个视频，点击左右切换，暂停当前视频
weixin_50449022的博客
02-10 2033
vue 轮播图多个视频，点击左右切换，暂停当前视频
uniapp 多个video组件，如何实现每次只有一个视频在播放，其他的在暂停，写代码
04-03
可以通过以下步骤实现每次只有一个视频在播放，其他的在暂停： 1. 在每个video组件上添加一个id属性，用来标识不同的视频组件。例如： ```html <video :src="video1" id="video1"></video> <video :src="video2" id="video2"></video> ``` 2. 在data中添加一个变量，用来保存当前正在播放的视频组件的id。初始值为null。 ```js data() { return { currentVideoId: null } } ``` 3. 在每个video组件上绑定一个play事件和pause事件，用来更新currentVideoId的值。 ```html <video :src="video1" id="video1" @play="onPlay('video1')" @pause="onPause('video1')"></video> <video :src="video2" id="video2" @play="onPlay('video2')" @pause="onPause('video2')"></video> ``` ```js methods: { onPlay(videoId) { if (this.currentVideoId && this.currentVideoId !== videoId) { // 如果当前有正在播放的视频，并且不是当前触发的视频，则暂停当前视频 const currentVideo = uni.createVideoContext(this.currentVideoId) currentVideo.pause() } this.currentVideoId = videoId }, onPause(videoId) { if (this.currentVideoId === videoId) { // 如果暂停的视频是当前正在播放的视频，则清空currentVideoId this.currentVideoId = null } } } ``` 4. 在mounted生命周期钩子中，获取所有video组件的id，并将其保存到一个数组中。 ```js mounted() { this.videoIds = this.$el.querySelectorAll('video').map(v => v.id) } ``` 完整代码如下： ```html <template> <view> <video :src="video1" id="video1" @play="onPlay('video1')" @pause="onPause('video1')"></video> <video :src="video2" id="video2" @play="onPlay('video2')" @pause="onPause('video2')"></video> </view> </template> <script> export default { data() { return { videoIds: [], currentVideoId: null, video1: 'http://example.com/video1.mp4', video2: 'http://example.com/video2.mp4' } }, mounted() { this.videoIds = this.$el.querySelectorAll('video').map(v => v.id) }, methods: { onPlay(videoId) { if (this.currentVideoId && this.currentVideoId !== videoId) { // 如果当前有正在播放的视频，并且不是当前触发的视频，则暂停当前视频 const currentVideo = uni.createVideoContext(this.currentVideoId) currentVideo.pause() } this.currentVideoId = videoId }, onPause(videoId) { if (this.currentVideoId === videoId) { // 如果暂停的视频是当前正在播放的视频，则清空currentVideoId this.currentVideoId = null } } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值