微信小程序抖音实战-支持手机播放小视频

Myth丶恋晨 2022-05-15 02:43 408阅读 0赞

> 上一篇抖音播放小视频文章发出来后很多的粉丝纷纷留言问为什么手机不能用呀！  
> 小编也是试了诸多方法，最后把经验总结出来给大家做了一个改进的例子

IT实战联盟博客：[http://blog.100boot.cn][http_blog.100boot.cn]

### 首先看下效果图 ###

![8fab6a5bb6bdb799ee2b6aaa11aaa52f.png][]

预览效果截图

![194b2bdf9c267414f6d0f297801d8689.png][]

点击后播放截图

![54d1d9768108725a88141c1854673977.png][]

点击屏幕出现暂停按钮截图

### 实现思路 ###

给每个视频增加一个封面图片，轮播的时候只显示封面图片，当用户点击播放的时候，再弹出视频，当用户点击视频的时候显示暂停按钮，点击暂停按钮隐藏视频播放层并暂停播放

> 经过小编的多次尝试建议一个小程序只用一个视频标签，一个视频上下文实例，不然会出现很多稀奇古怪的问题。

### 局部代码变动 ###

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的抖音案例下载

![2c7ab907753dbd0b2579eedeacb4aa1d.png][]

更多精彩内容

*  [微信小程序实战篇：抖音案例使用手册][Link 1]
 *  [微信小程序抖音实战-首页（上）][-]
 *  [微信小程序抖音实战-首页（下）][- 1]
 *  [微信小程序实战篇：实现抖音评论效果][Link 2]
 *  [微信小程序营销之大转盘（二）][Link 3]
 *  [微信小程序抖音实战-支持播放小视频][- 2]

关注我们

IT实战联盟博客：[http://blog.100boot.cn][http_blog.100boot.cn]

> 如果需要源码和素材可以关注“IT实战联盟”公\*众\*号并留言（微商城源码，5个字会收到源码下载地址，一定要看源码里面的操作手册会少走很多弯路），也可以加入交流群和作者互撩哦~~~

[http_blog.100boot.cn]: http://blog.100boot.cn/
[8fab6a5bb6bdb799ee2b6aaa11aaa52f.png]: /images/20220515/183d8aa1804346dbb4389cf9b5378391.png
[194b2bdf9c267414f6d0f297801d8689.png]: /images/20220515/84953e711a8e435baf4edad8d3289eed.png
[54d1d9768108725a88141c1854673977.png]: /images/20220515/852d17b79c524c11874b10f4efe4c7ca.png
[2c7ab907753dbd0b2579eedeacb4aa1d.png]: /images/20220515/9f09d3a574364981978bdaafa154122e.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484519&idx=1&sn=d4ae23f8717b216ca07fa23b3efbbc62&chksm=fc4df626cb3a7f30a6d71e24938a7f976f6c92d54efbb88e8c7ace2ffa33d914679d481dd28b&scene=21#wechat_redirect
[-]: http://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484465&idx=1&sn=53481d7a25a180d5836abba7d338cb57&chksm=fc4df670cb3a7f6653ca40cbaa6802a4a91edfecd093fd132468e7d7ac914493bf1aa7c6f214&scene=21#wechat_redirect
[- 1]: http://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484565&idx=1&sn=4e9b3ea9373ad9887e79d98468410f32&chksm=fc4df6d4cb3a7fc24fd27257b1bf1bbb1241fb5dc8ce3905b01e9251b10b56da967444efcc84&scene=21#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484440&idx=2&sn=b06febe8c1acc632364f690fe67b3a1b&chksm=fc4df659cb3a7f4f820115ddb6767e5b2aa1497903d7876156f41b278466edf0e3c158e588a1&scene=21#wechat_redirect
[Link 3]: http://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484599&idx=1&sn=2af7dd2eecad1126ed6aaeb8d4356ffb&chksm=fc4df6f6cb3a7fe071006e682cfadf7e07dacb5b8dc06c3bdd9c361086fdda53d40cfde66646&scene=21#wechat_redirect
[- 2]: http://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484605&idx=1&sn=bd7f3b70316fe1dbdf967f30294bc4ab&chksm=fc4df6fccb3a7fea5c08b106eb12ec75ce5772cdf792ae64242bc3610ce7d5891e0496b79e21&scene=21#wechat_redirect