微信小程式抖音實戰-支援手機播放小視訊
阿新 • • 發佈：2018-12-29
上一篇抖音播放小視訊文章發出來後很多的粉絲紛紛留言問為什麼手機不能用呀！
小編也是試了諸多方法，最後把經驗總結出來給大家做了一個改進的例子
首先看下效果圖
預覽效果截圖
點選後播放截圖
點選螢幕出現暫停按鈕截圖
實現思路
給每個視訊增加一個封面圖片，輪播的時候只顯示封面圖片，當用戶點選播放的時候，再彈出視訊，當用戶點選視訊的時候顯示暫停按鈕，點選暫停按鈕隱藏視訊播放層並暫停播放
經過小編的多次嘗試建議一個小程式只用一個視訊標籤，一個視訊上下文例項，不然會出現很多稀奇古怪的問題。
區域性程式碼變動
1. 播放提示按鈕
<!-- 輪播圖片 --> <swiper duration="{{duration}}" vertical="true" bindchange="changeSubject" current="{{current}}" class='swiper'> <block wx:for="{{subjectList}}" wx:key="*this"> <swiper-item> <image src="{{item.coverUrl}}" mode='aspectFill' class="slide-image" bindtap='previewSubject' /> </swiper-item> </block> </swiper> <!-- 播放提示按鈕 --> <view class='play-box' wx:if="{{subject.type == 'video'}}"> <image src="/image/play.png" mode='aspectFill' class="icon-play" bindtap='previewSubject' /> </view>
在輪播圖下面增加了一個播放按鈕，當時視訊的時候顯示出來
小編提示：如果是絕對定位的元素，請按照順序擺放程式碼，頁面的層次結構跟程式碼的上下順序有關
2. 視訊層
<!-- 視訊層 --> <view class="videoLayer" hidden='{{isHiddenVideo}}'> <video id="myVideo" src="{{videoSrc}}" binderror="videoErrorCallback" autoplay='{{true}}' controls='{{false}}' class='slide-image' loop='true' show-progress='false' show-play-btn='false' show-center-play-btn='true' show-fullscreen-btn='false' objectFit='fill'> <cover-view class='controls' bindtap="bindSwitchControls"> <cover-view class="icon-box" hidden='{{isHiddenControls}}'> <cover-image class='icon-pause' src="/image/pause.png" bindtap="hidePreview" /> </cover-view> </cover-view> </video> </view>
3. 視訊元件上下文
/**
* 生命週期函式--監聽頁面初次渲染完成
*/
onReady: function () {
var that = this;
wx.setNavigationBarTitle({
title: "微抖音",
})
// 評論彈出層動畫建立
this.animation = wx.createAnimation({
duration: 400,
timingFunction: "ease",
delay: 0
})
// 視訊元件初始化
this.videoContext = wx.createVideoContext('myVideo')
},
初始化我們的視訊元件
4. 播放視訊，當用戶點選播放按鈕的時候播放視訊
previewSubject: function(){
var subject = this.data.subject;
if (subject.type == 'video'){
this.setData({
videoSrc: subject.src,
isHiddenVideo: false
})
}else{
wx.previewImage({
urls: [subject.coverUrl],
})
}
},
如果是視訊就顯示視訊層並自動播放，如果是圖片就開啟預覽頁面，這樣的好處就是有些大的圖片可以通過預覽的方式看到全貌
5. 隱藏視訊
hidePreview: function () {
var subject = this.data.subject;
if (subject.type == 'video') {
// 暫停播放
this.videoContext.pause();
// 隱藏視訊層
this.setData({
isHiddenVideo: true
})
}
},
微信的視訊外掛雖然支援手動暫停按鈕，但是無法自定義樣式所以，還是建議自己做樣式和事件處理
6. 自動隱藏暫停按鈕，以及異常日誌
time: null,
bindSwitchControls: function () {
if (this.time) {
clearTimeout(this.time)
}
var isHidden = !this.data.isHiddenControls;
this.setData({
isHiddenControls: isHidden
})
// 自動隱藏按鈕
var that = this;
if (!isHidden) {
this.time = setTimeout(function () {
var isHidden = that.data.isHiddenControls;
if (!isHidden) {
that.setData({
isHiddenControls: true
})
}
}, 3000)
}
},
videoErrorCallback: function (e) {
console.log('視訊錯誤資訊:' + this.data.subject.src)
console.log(e.detail.errMsg)
},
視訊如果播放錯誤，一般都需要記錄日誌並反饋到後臺分析處理
完整原始碼請到官網https://100boot.cn的抖音案例下載
更多精彩內容
關注我們
如果需要原始碼和素材可以關注“IT實戰聯盟”公*眾*號並留言（微商城原始碼，5個字會收到原始碼下載地址，一定要看原始碼裡面的操作手冊會少走很多彎路），也可以加入交流群和作者互撩哦~~~