微信小程序实现video列表播放

最新推荐文章于 2024-04-24 01:33:47 发布
最新推荐文章于 2024-04-24 01:33:47 发布
阅读量7.5k 收藏 59
点赞数 3
分类专栏： 微信小程序 文章标签： 微信小程序 微信小程序video播放 微信小程序视频播放列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YongChao_bms/article/details/103876165
版权

需求：实现video列表功能，播放视频前，先暂停上一个视频，再播放下一个视频。

原理：不提倡同一个页面存在多个video组件，列表只存在一个video组件，通过获取当前点击的视频id,判断是否显示video组件；列表默认用封面+播放按钮图片代替video，点点击播放按钮时，隐藏封面+播发按钮，显示video组件(设置默认播放)，进行播放。

效果图：

代码：

wxml:

  

js:

CSS:

 

 

 

YongChao_bms
关注
  • 3
    点赞
  • 踩
  • 59
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序开发中的视频播放和直播功能
吃不胖.
03-01 345
微信小程序开发中的视频播放和直播功能是非常常见和重要的功能，也是开发者们经常会遇到的问题之一。以下是一份详细的代码案例，涵盖了视频播放和直播功能的实现。在微信小程序中，我们可以使用腾讯云的实时音视频（TRTC）SDK来实现直播功能。在实现直播功能之前，我们需要先理解一下直播的原理和流程。接下来，在小程序中引入腾讯云实时音视频（TRTC）SDK，并初始化相关参数。文件中，我们需要定义相关的函数来控制视频的播放、暂停和结束事件。函数中，我们调用腾讯云实时音视频（TRTC）SDK的相关接口来开始推流。
微信小程序使用video组件播放M3U8视频卡顿
01-20
微信小程序中使用video组件播放m3u8直播视频，在ios的真机预览里点击video中间的播放容易卡几十秒，此时什么都做不了，手机也非常非常卡。 我的解决办法是在视频video组件里加入custom-cache={{false}} autoplay=true，禁缓存，开启自动播放，也符合使用场景，因为这种类似的m3u8多是像萤石云这种直播使用，视频本身就是没声音的，自动播放并不会影响用户使用，可以在页面中方格view给video，点击全屏时候视频全屏即可。 华生c
videojs-playlist 视频列表播放_videojs列表
09-19
videojs-playlist 视频列表播放
微信小程序实现下载功能（以下载视频为例）
lee2813的博客
04-23 9319
一、 wx.downloadFile（）方法：访问视频对应的Url,回调函数返回一个该视频文件的临时路径。 wx.downloadFile({ url: app.serverUrl + me.data.videoInfo.videoPath, success: function (res) { // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
微信小程序学习——视频播放小程序
weixin_54049495的博客
08-24 1836
小程序第三课
微信小程序轮播视频，切换停止播放
少油少盐不要辣
06-22 928
在轮播切换的事件中，处理停止视频播放的逻辑。获取视频“元素”对象，参考微信小程序开发文档。
微信小程序一个页面多个视频（video组件），限制一个播放，其它暂停
12-09 4631
微信小程序一个页面多个视频（video组件），限制一个播放制一个播放，其它暂停 html <view class='videoBoxTitle'>视频列表</view> <!-- 循环端请求到的视频数据，每一个视频都需要有id(id='{{item.id}}')--> <block wx:for="{{videoListData}}" wx:index='index' wx:key='id'> <video class="myVi
微信小程序 视频列表滑动无限循环（仿抖音）
老虎帅呆了的博客
11-28 5474
微信小程序 视频列表滑动无限循环（仿抖音），安卓ios表现基本一致，非swiper组件实现，滑动效果流畅不卡顿，实现了列表无限循环。完整代码在下面。。。支持位置导航、拨打电话、复制微信号、分享、联系客服和拖动视频进度功能，暂未添加评论留言功能，后期会逐步增加。
微信小程序-下载文件并打开/下载视频播放视频/下载音频文件-Android和IOS调试终版
灿灿大王搭建的黄金屋
04-28 6288
下载文件并预览： 调接口下载文件，接口返回的是.bin类型的临时文件，直接调用uniapp原生接口openDocument可能出现打不开的情况或者可能打开文件乱码异常，所以我们需要获取一下文件类型fileType 适用于接口返回头中返回了文件名称和类型的情况： 使用 var arr = res.header['Content-Disposition'].toString().split('filename=')[1].split('.') 从返回头Content-Disposition中截取文件
微信小程序的video列表，实现同一时间只能播放一个视频及iOS进行video列表渲染时，无法播放问题
Cinderellahh92的博客
10-19 1410
wxml <view class="page-box"> <scroll-view scroll-y="true" class='infoWord' style="height:calc(100% - {{statusBarHeight}}px - 88rpx - 32rpx); "> <view class='video-box' wx:for='{{videoData}}' wx:key='index'> <view clas.
微信小程序实践——实验3视频播放小程序
qq_50960991的博客
08-20 2340
微信小程序创作实现视频播放器
微信小程序video组件列表播放视频wxvideos-master.zip
09-25
微信小程序video组件列表播放视频wxvideos-master.zip
微信小程序使用video组件播放视频功能示例【附源码下载】
08-28
主要介绍了微信小程序使用video组件播放视频功能,结合实例形式分析了video组件播放本地mp4小视频的具体实现技巧,并附带源码供读者下载参考,需要的朋友可以参考下
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
10-15
主要介绍了微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
videoUI视频切换播放和全屏播放微信小程序
08-10
videoUI 视频切换播放和全屏播放 微信小程序
基于微信小程序的图书馆座位预约系统的设计与实现
No_Name_Cao_Ni_Mei的博客
04-22 624
本文主要介绍了基于微信小程序的图书馆座位预约系统的设计与实现。随着图书馆座位需求的增加，传统的人工管理方式已经无法满足用户的需求。因此，设计并实现一个高效的座位预约系统具有重要意义。首先，本文对图书馆座位预约系统的需求进行了分析。通过调研用户的座位预约习惯、座位类型和预约规则等，确定了系统的功能模块和实现目标。系统的主要模块包括用户登录模块、座位浏览模块、座位预约模块以及管理模块。接着，本文详细介绍了微信小程序的设计与实现过程。借助微信小程序的便利性和开发工具的支持，开发者能够快速搭建座位预约系统。
【微信小程序从入门到精通（项目实战）】——微电影小程序
php优质创造者
04-18 3288
如果还要不懂运行不出效果可以私信博主
微信小程序vue.js+uniapp服装商城销售管理系统nodejs-java
专注分享bishe530的博客
04-21 430
最基本的是，Spring Boot是一个可以被任何项目的构建系统使用的库集合。Spring Boot 是 Spring 家族中的一个全新的框架，它用来简化Spring应用程序的创建和开发过程。（4）实证研究法：自己进行大量的编码测试，一切从动手编码出发，结合自己以前的编程基础，实现系统所需要的功能。entity: 实体，用来放与数据库表里对应的实体类，表中的字段对应类中的属性值，并附有set/get方法。（1）调查法：从实际的系统开发目的出发，结合系统需求调研，得出本系统的功能结构模块。
N-151基于微信小程序校园学生活动管理平台
最新发布
IT教程资源
04-24 283
登录、注册、首页、推荐活动、轮播图、活动详情、搜索活动、报名活动、发布活动，个人资料、修改密码、参与活动、学分统计、退出账号等等。登录、修改密码、退出登录、首页、系统管理(用户管理、角色管理、菜单管理、组织管理)、留言管理、订单管理、统计管理、活动管理。服务端技术：springboot+mybatisplus。服务器：Tomcat9.0， jdk1.8。开发工具：IDEA、微信小程序。前端技术：vue、uniapp。数据库：mysql5.7。项目构建：maven。
微信小程序video隐藏播放按钮
05-31
要隐藏微信小程序中video组件的播放按钮，可以通过以下步骤实现： 1.在对应的wxml文件中，将video组件的show-center-play-btn属性设置为false，如下所示： ``` <video src="{{src}}" show-center-play-btn="false"></video> ``` 2.在对应的wxss文件中，将video组件的控制条和播放按钮的显示隐藏设置为false，如下所示： ``` video::-webkit-media-controls { display:none !important; } video::-webkit-media-controls-enclosure { display:none !important; } ``` 这样就可以隐藏微信小程序中video组件的播放按钮了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值