微信小程序video自定义播放与暂停按钮

1.实现效果

2.实现原理

官网：https://developers.weixin.qq.com/miniprogram/dev/component/video.html
相关API:wx.createVideoContext(string id, Object this)

属性：

3.此demo所用到的属性有

controls：是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
muted：是否静音
show-play-btn：是否显示视频底部控制栏的播放按钮
show-center-play-btn：是否显示视频中间的播放按钮
show-mute-btn：是否显示静音按钮
事件：
bindended:当播放到末尾时触发 ended 事件
接口：
wx.createVideoContext(string id, Object this)

4.完整代码（更多代码移至码云）

https://gitee.com/susuhhhhhh/wxmini_demo

5.部分代码

<!--pages/another/mroevideos/index.wxml-->
<view class="c1_box"><view class="v1_box" catchtap="showPlaybtn" data-type="v1"><video id='myVideo0'  show-play-btn="{{false}}" show-center-play-btn="{{false}}"  picture-in-picture-show-progress="{{true}}" poster="https://i.postimg.cc/j57Lwdy3/123.png" src="https://static.51dh.com.cn/dbp/12/98/4494bd8a6e0fcd4a992f25a42bea28f8d1fb.mp4"  show-mute-btn="{{true}}" muted="{{true}}" bindended="showEndBtn" data-type="v1"></video><!-- 暂停按钮 --><image src="/img/pause.png" class="pause_icon " catchtap="tobePlay" data-type="v1" hidden="{{!v1_play}}"></image><!-- 播放按钮 --><image src="/img/play.png" class="pause_icon" catchtap="tobePause"  data-type="v1"   hidden="{{v1_pause}}"></image></view>
</view><view class="c1_box"><view class="v1_box" catchtap="showPlaybtn" data-type="v2"><video id='myVideo1'  show-play-btn="{{false}}" show-center-play-btn="{{false}}"  picture-in-picture-show-progress="{{true}}" poster="https://i.postimg.cc/FsKgQ95T/yy.png" src="https://static.51dh.com.cn/dbp/12/98/4494bd8a6e0fcd4a992f25a42bea28f8d1fb.mp4"  show-mute-btn="{{true}}" muted="{{true}}" bindended="showEndBtn" data-type="v2"></video><!-- 暂停按钮 --><image src="/img/pause.png" class="pause_icon " catchtap="tobePlay" data-type="v2" hidden="{{!v2_play}}"></image><!-- 播放按钮 --><image src="/img/play.png" class="pause_icon" catchtap="tobePause"  data-type="v2"   hidden="{{v2_pause}}"></image></view>
</view>
<!-- video的属性：controls：是否显示默认播放控件（播放/暂停按钮、播放进度、时间）autoplay:自动播放loop：是否循环muted：是否静音show-play-btn：是否显示视频底部控制栏的播放按钮show-center-play-btn：是否显示视频中间的播放按钮show-mute-btn：是否显示静音按钮enable-play-gesture:是否开启播放手势，即双击切换播放/暂停bindended:当播放到末尾时触发 ended 事件
-->

/* pages/another/mroevideos/index.wxss */
page{background-color: #a4d1eb;
}
.c1_box{width: 750rpx;height: 520rpx;position: relative;z-index: 99;
}
.pause_icon{position: absolute;width: 84rpx;height: 84rpx;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: 999;
}
.v1_box{width:750rpx;height: 500rpx;position: absolute;top: 0;
}
video{width: 100%;height: 100%;display: block;
}

// pages/another/mroevideos/index.js
Page({/*** 页面的初始数据*/data: {//视频v1_play:true,//默认的显示播放的按钮v1_pause:true,//默认不显示暂停的按钮v2_play:true,//默认的显示播放的按钮v2_pause:true,//默认不显示暂停的按钮},onLoad: function (options) {},onReady: function () {},onShow: function () {},//控制视频播放tobePlay(e){let {type}=e.currentTarget.dataset;let data_va1='',data_va2="";if(type=="v1"){wx.createVideoContext('myVideo0').play();data_va1='v1_play';data_va2="v1_pause";}if(type=="v2"){wx.createVideoContext('myVideo1').play();data_va1='v2_play';data_va2="v2_pause";}if(type=="v3"){wx.createVideoContext('myVideo2').play();data_va1='v3_play';data_va2="v3_pause";}setTimeout(()=>{this.setData({[data_va1]:false,[data_va2]:false,},setTimeout(()=>{this.setData({[data_va2]:true,})},3000))},100)},//显示播放的按钮showPlaybtn(e){let {type}=e.currentTarget.dataset;let data_va='';if(type=="v1"){if(this.data.v1_play){return false}data_va='v1_pause'}if(type=="v2"){if(this.data.v2_play){return false}data_va='v2_pause'}if(type=="v3"){if(this.data.v3_play){return false}data_va='v3_pause'}this.setData({[data_va]:false,},setTimeout(()=>{this.setData({[data_va]:true,})},3000))},//暂停视频的播放tobePause(e){let {type}=e.currentTarget.dataset;let data_va1='',data_va2="";if(type=="v1"){wx.createVideoContext('myVideo0').pause();data_va1="v1_play";data_va2="v1_pause";}if(type=="v2"){wx.createVideoContext('myVideo1').pause();data_va1="v2_play";data_va2="v2_pause";}if(type=="v3"){wx.createVideoContext('myVideo2').pause();data_va1="v3_play";data_va2="v3_pause";}setTimeout(()=>{this.setData({[data_va1]:true,[data_va2]:true,})},100)},//视频播放到末尾触发的事件 视频播放结束 显示暂停的按钮showEndBtn(e){//显示暂停按钮 隐藏播放按钮let {type}=e.currentTarget.dataset;let data_va='',data_va1="";if(type=="v1"){data_va="v1_play",data_va1="v1_pause"}if(type=="v2"){data_va="v2_play",data_va1="v2_pause"}if(type=="v3"){data_va="v3_play",data_va1="v3_pause"}this.setData({[data_va]:true,[data_va1]:true,})}})

微信小程序video自定义播放与暂停按钮相关推荐

小程序video自定义播放按钮
小程序video组队的默认样式是无法修改的,实现方式是隐藏组件的播放按钮,再自己实现播放暂停的交互. wxml结构隐藏掉中间按钮show-center-play-btn 和底部按钮show-pl ...
微信小程序video组件播放不了
最近使用小程序的video组件,视频无法播放,报错The elemen has no support sources: 原因video组件只支持视频源的文件,必须是.mp4或者其他指向视频源的链接,如 ...
微信小程序video全屏分分享按钮
1.研究全屏的分享并进行尝试,尝试三种方法,发现了巨巨巨多的坑,坑总结方法一:cover-view中包裹button和view-image踩坑 (1)cover-view里面包裹button,文档中 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
微信小程序实现音乐播放器（2）
文章目录前情提要 BackgroundAudioManager API:wx.setNavigationBarTitle() 搭建静态资源服务器小程序项目 app.json app.wxss pa ...
微信小程序video组件调用腾讯视频的解决方案
最近在开发中碰到了微信小程序video组件调用腾讯视频的问题,就趁机来总结一下. 对方只给了我一个腾讯视频的网页链接,然后需要放置到小程序里面,大概开发前景是这样的. 对方提供的视频链接: https ...
微信小程序之音乐播放
微信小程序之音乐播放这次用的是API中的wx.createInnerAudioContext()接口 (创建内部 audio 上下文 InnerAudioContext 对象.) InnerAudi ...
微信小程序实现音乐播放器（5）
文章目录前情提要 pubsubjs实现页面通信 moment.js实现时间格式化 BackgroundAudioManager 小程序项目 app.json app.wxss app.js page ...
php自定义弹窗,微信小程序弹窗自定义的代码
这篇文章主要介绍了微信小程序弹窗自定义实例代码的相关资料,有时候做开发项目的时候需要根据客户需求更改原系统的组件,这里就对小程序中弹窗进行更改,需要的朋友可以参考下微信小程序弹窗首先wxml代 ...
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...