這篇文章給大家分享的是有關(guān)微信小程序中video視頻如何實(shí)現(xiàn)自定義播放按鈕、封面圖、視頻封面上文案的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

專(zhuān)業(yè)從事網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè),高端網(wǎng)站制作設(shè)計(jì),成都微信小程序,網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團(tuán)隊(duì)竭力真誠(chéng)服務(wù)，采用html5+CSS3前端渲染技術(shù)，成都響應(yīng)式網(wǎng)站建設(shè)公司，讓網(wǎng)站在手機(jī)、平板、PC、微信下都能呈現(xiàn)。建站過(guò)程建立專(zhuān)項(xiàng)小組，與您實(shí)時(shí)在線(xiàn)互動(dòng)，隨時(shí)提供解決方案，暢聊想法和感受。

效果圖展示：  

實(shí)現(xiàn)方法：

在video中添加一個(gè)cover-view，在cover-view寫(xiě)兩個(gè)cover-image，一個(gè)用來(lái)存儲(chǔ)封面圖、一個(gè)用來(lái)存放播放按鈕，同級(jí)寫(xiě)一個(gè)cover-view用來(lái)完成封面上的文字，設(shè)置絕對(duì)定位，水平垂直居中，在播放按鈕上添加點(diǎn)擊事件，點(diǎn)擊之后隱藏cover-view，最后在監(jiān)聽(tīng)視頻結(jié)束事件，重新填充封面跟播放按鈕就可以了。

代碼：

   
    
    
    
     
      
       1天1元，開(kāi)通VIP
       更多優(yōu)質(zhì)視頻等你來(lái)解鎖
      
      
     
    
   

 
Page({
 data: {
  isShow:true,
  videoSrc:'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',  // 視頻
  videoCoverImg:'http://img5.imgtn.bdimg.com/it/u=1672477765,2527992874&fm=26&gp=0.jpg',  // 視頻封面圖
  videoPlayIcon:'http://39.105.134.221:8080/test/source1.png', // 視頻播放icon
  videoLockIcon:'http://39.105.134.221:8080/test/source2.png',  // 視頻播放鎖
 },
 onReady: function () {
  this.videoContext = wx.createVideoContext('myVideo')
 },
 // 點(diǎn)擊封面自定義播放按鈕時(shí)觸發(fā)
 bindplay() {
  this.setData({
   isShow:false
  })
  this.videoContext.play();
  console.log('play')
 },
 // 監(jiān)聽(tīng)播放到末尾時(shí)觸發(fā)
 bindended(){
  console.log('bindended')
  this.setData({
   isShow: true
  })
  this.videoContext.ended();
 },
 // 監(jiān)聽(tīng)暫停播放時(shí)觸發(fā)
 bindpause(){
  console.log('pause')
 }
})
 
.video_cover{
 width:100%;
 height:100%;
 position:relative;
}
.video_play_icon{
 position:absolute;
 left:50%;
 top:50%;
 transform:translate(-50%,-50%);
 width:40px;
 height:40px;
 z-index:5
}
.video_bg_black{
 position:absolute;
 left:0;
 top:0;
 bottom:0;
 right:0;
 background:rgba(0,0,0,.5);
}
.video_cover_txt{
 display:flex;
 justify-content: flex-end;
 align-items: center;
 text-align:right;
 color: #fff;
 font-size: 28rpx;
 margin-top: 35rpx;
 height: 90rpx;
}
.video_icon_lock{
 width:30rpx;
 height: auto;
 margin:0 30rpx;
}
.video_txt{
 margin:10rpx auto;
}

感謝各位的閱讀！關(guān)于“微信小程序中video視頻如何實(shí)現(xiàn)自定義播放按鈕、封面圖、視頻封面上文案”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！