1.实现效果
2.实现原理
官网：https://developers./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.完整代码（更多代码移至码云）
/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="/j57Lwdy3/123.png" src="/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="/FsKgQ95T/yy.png" src="/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.jsPage({/*** 页面的初始数据*/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,})}})
