去年抖音(抖音)广播作品发送视频文章后，很多粉丝评论说为什么不能使用手机。
小编也尝试了各种方法，最后总结了经验，给大家展示了改善的例子
先看效果图。
预览效果截图
单击后播放屏幕快照
单击屏幕上出现“暂停”按钮屏幕截图
实现事故
向每个视频添加封面图片，循环时仅显示封面图片，用户单击播放时弹出视频，用户单击视频时显示暂停按钮，单击暂停按钮隐藏视频播放层，暂停播放
通过小编的多次尝试，提出只使用一个视频标签、一个视频上下文实例的小程序。否则，会出现很多奇怪的问题。(大卫亚设)。
局部代码变动
1. 播放提示按钮
<!-- 轮播图片 -->
<swiper duration="{{duration}}" vertical="true" bindchange="changeSubject" current="{{current}}" class='swiper'>
<block wx:for="{{subjectList}}" wx:key="*this">
<swiper-item>
<image src="{{i}}" mode='aspectFill' class="slide-image" bindtap='previewSubject' />
</swiper-item>
</block>
</swiper>
<!-- 播放提示按钮 -->
<view class='play-box' wx:if="{{ == 'video'}}">
<image src="/image; 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; bindtap="hidePreview" />
</cover-view>
</cover-view>
</video>
</view>
3. 视频组件上下文
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
var that = this;
wx.setNavigationBarTitle({
title: "微抖音",
})
// 评论弹出层动画创建
= wx.createAnimation({
duration: 400,
timingFunction: "ease",
delay: 0
})
// 视频组件初始化
= wx.createVideoContext('myVideo')
},
初始化我们的视频组件
4. 播放视频，当用户点击播放按钮的时候播放视频
previewSubject: function(){
var subject = ;
if ( == 'video'){
({
videoSrc: ,
isHiddenVideo: false
})
}else{
wx.previewImage({
urls: [],
})
}
},
如果是视频就显示视频层并自动播放，如果是图片就打开预览页面，这样的好处就是有些大的图片可以通过预览的方式看到全貌
5. 隐藏视频
hidePreview: function () {
var subject = ;
if ( == 'video') {
// 暂停播放
.pause();
// 隐藏视频层
({
isHiddenVideo: true
})
}
},
微信的视频插件虽然支持手动暂停按钮，但是无法自定义样式所以，还是建议自己做样式和事件处理
6. 自动隐藏暂停按钮，以及异常日志
time: null,
bindSwitchControls: function () {
if ) {
clearTimeout)
}
var isHidden = !;
({
isHiddenControls: isHidden
})
// 自动隐藏按钮
var that = this;
if (!isHidden) {
= setTimeout(function () {
var isHidden = ;
if (!isHidden) {
({
isHiddenControls: true
})
}
}, 3000)
}
},
videoErrorCallback: function (e) {
con('视频错误信息:' + .src)
con)
},
视频如果播放错误，一般都需要记录日志并反馈到后台分析处理
完整源码请到官网的抖音案例下载
更多精彩内容
- 微信小程序实战篇：抖音案例使用手册
- 微信小程序抖音实战-首页（上）
- 微信小程序抖音实战-首页（下）
- 微信小程序实战篇：实现抖音评论效果
- 微信小程序营销之大转盘（二）
- 微信小程序抖音实战-支持播放小视频
关注我们
如果需要源码和素材可以关注“IT实战联盟”并留言（微商城源码，5个字会收到源码下载地址，一定要看源码里面的操作手册会少走很多弯路），也可以加入交流群和作者互撩哦~~~
