微信小程序视频播放与预览图的实现

发表于 | 分类于

微信的视频组件没有自带的预览图功能。网上找的方案，用hidden来实现，代码如下：

1
2
3
4
5
6
7
8
9
10
<!-- t1.wxml-->
<view class="playVideo">
      <view  class="pimg" wx:if="{{playvideos == 1}}">
        <canvas bindtap="play"  canvas-id="vcanva" class="v-canva"></canvas>
        <text>看视频了解小程序</text>
      </view>
      <video class="video" wx:if="{{playvideos == 2}}" 
      src="{{src}}" 
      autoplay="autoplay" ></video>
  </view>

在 t1.js 中加入对应的点击事件函数

1
2
3
play: function (e) {
  this.setData({ playvideos: 2 });
}

来源
https://www.zhihu.com/question/54933610