上一篇抖音播放小視頻文章發出來後很多的粉絲紛紛留言問為什麼手機不能用呀！
小編也是試了諸多方法，最後把經驗總結出來給大家做了一個改進的例子
首先看下效果圖
預覽效果截圖
點擊後播放截圖
點擊屏幕出現暫停按鈕截圖
實現思路
給每個視頻增加一個封面圖片，輪播的時候只顯示封面圖片，當用戶點擊播放的時候，再彈出視頻，當用戶點擊視頻的時候顯示暫停按鈕，點擊暫停按鈕隱藏視頻播放層並暫停播放
經過小編的多次嘗試建議一個小程序只用一個視頻標籤，一個視頻上下文實例，不然會出現很多稀奇古怪的問題。
局部代碼變動
1. 播放提示按鈕
<swiper duration="{{duration}}" vertical="true" bindchange="changeSubject" current="{{current}}" class='swiper'>
<block wx:for="{{subjectList}}" wx:key="*this">
<swiper-item>
<image class="lazy" data-original="{{item.coverUrl}}" mode='aspectFill' class="slide-image" bindtap='previewSubject' />
swiper-item>
block>
swiper>
<view class='play-box' wx:if="{{subject.type == 'video'}}">
<image class="lazy" data-original="/image/play.png" mode='aspectFill' class="icon-play" bindtap='previewSubject' />
view>
在輪播圖下面增加了一個播放按鈕，當時視頻的時候顯示出來
小編提示：如果是絕對定位的元素，請按照順序擺放代碼，頁面的層次結構跟代碼的上下順序有關
2. 視頻層
<view class="videoLayer" hidden='{{isHiddenVideo}}'>
<video id="myVideo" class="lazy" data-original="{{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' class="lazy" data-original="/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個字會收到源碼下載地址，一定要看源碼裡面的操作手冊會少走很多彎路），也可以加入交流群和作者互撩哦~~~
閱讀更多 IT實戰聯盟 的文章
