微信小程序中的video視頻實現 自定義播放按鈕、封面圖、視頻封面上文案

發布時間: 2020-01-02 16:27:46 來源: 互聯網 欄目: JavaScript 點擊:

這篇文章主要介紹了微信小程序中的video視頻實現 自定義播放按鈕、封面圖、視頻封面上文案,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下

效果圖展示:  

實現方法:

在video中添加一個cover-view,在cover-view寫兩個cover-image,一個用來存儲封面圖、一個用來存放播放按鈕,同級寫一個cover-view用來完成封面上的文字,設置絕對定位,水平垂直居中,在播放按鈕上添加點擊事件,點擊之后隱藏cover-view,最后在監聽視頻結束事件,重新填充封面跟播放按鈕就可以了。

代碼:

<video id="myVideo" src="{{videoSrc}}" enable-danmu controls show-fullscreen-btn show-center-play-btn="{{false}}" auto-pause-if-navigate auto-pause-if-open-native show-play-btn object-fit="fill" bindpause="bindpause" bindended="bindended" >
   <cover-view class="video_cover" wx:if="{{isShow}}" bindtap="bindplay">
    <cover-image src="{{videoCoverImg}}" mode="widthFix"></cover-image>
    <cover-image src="{{videoPlayIcon}}" mode="widthFix" class="video_play_icon"></cover-image>
    <cover-view class="video_bg_black">
     <cover-view class="video_cover_txt">
      <cover-view>
       <cover-view class="video_txt">1天1元,開通VIP</cover-view>
       <cover-view class="video_txt">更多優質視頻等你來解鎖</cover-view>
      </cover-view>
      <cover-image src="{{videoLockIcon}}" class="video_icon_lock" mode="widthFix"></cover-image>
     </cover-view>
    </cover-view>
   </cover-view>
</video>
 
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')
 },
 // 點擊封面自定義播放按鈕時觸發
 bindplay() {
  this.setData({
   isShow:false
  })
  this.videoContext.play();
  console.log('play')
 },
 // 監聽播放到末尾時觸發
 bindended(){
  console.log('bindended')
  this.setData({
   isShow: true
  })
  this.videoContext.ended();
 },
 // 監聽暫停播放時觸發
 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;
}

總結

以上所述是小編給大家介紹的微信小程序中的video視頻實現 自定義播放按鈕、封面圖、視頻封面上文案,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對我們網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

本文標題: 微信小程序中的video視頻實現 自定義播放按鈕、封面圖、視頻封面上文案
本文地址: http://www.1921352.live/wangluo/javascript/296758.html

如果認為本文對您有所幫助請贊助本站

支付寶掃一掃贊助微信掃一掃贊助

  • 支付寶掃一掃贊助
  • 微信掃一掃贊助
  • 支付寶先領紅包再贊助
    聲明:凡注明"本站原創"的所有文字圖片等資料,版權均屬編程客棧所有,歡迎轉載,但務請注明出處。
    微信小程序地圖繪制線段并且測量(實例代碼)JS實現簡單日歷特效
    Top 网上挖矿机赚钱