一、案例演示

保留播放暂停、全屏按钮，进度条隐藏掉、手势拖动禁用

代码

 <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" show-fullscreen-btn="{{true}}" show-center-play-btn="{{false}}"  show-play-btn="{{true}}"  show-progress="{{false}}"  enable-progress-gesture="{{ false }}" ></video>

官方文档地址:
https://developers.weixin.qq.com/miniprogram/dev/component/video.html
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/observer.html
https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.html

监听视频是否播放完毕

<video bindended="palyEnd"></video>
<view class="startAnswer">
	<!--默认显示图片1-->
   <image src="1.png" wx:if="{{isAnswer == false}}"></image>
   <image src="2.png" wx:if="{{isAnswer == true}}"></image>
</view>

js文件

data:{
	isAnswer:false,//默认
}
// 播放完毕
palyEnd(){
   console.log("播放结束");
    // 显示按钮,这个地方是重点，局部地方会重新渲染
    this.setData({ isAnswer: true });
},

二、案例演示（倍速播放）

单纯想让视频固定倍速播放

代码

网址：https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.playbackRate.html

onReady: function () {
     // 倍速
     this.videoContext = wx.createVideoContext('myVideo');
     this.videoContext.playbackRate(2);//倍率，支持 0.5/0.8/1.0/1.25/1.5，2.6.3 起支持 2.0 倍速
 },

三、案例演示（去除进度条但还想显示视频时长）

去除进度条 就是没有使用controls属性，相对应的时间也就不显示了，目前想让时间显示出来，那这个地方需要自己去获取，并处理，这里用bindtimeupdate="timeUpdate"方法

代码

wxml:

<view class="videoBox">
    <video id="myVideo" bindloadedmetadata="videometa" binderror="videoErrorCallback"  src="{{videoUrl}}" show-fullscreen-btn="{{true}}" show-center-play-btn="{{false}}"  show-play-btn="{{true}}"  show-progress="{{false}}"  enable-progress-gesture="{{ false }}" bindended="palyEnd" bindtimeupdate="timeUpdate"></video>
    <view class="videoTime">
        {{currentTimeShow}}/{{durationShow}}
    </view>
</view>

wxss:

/* 视频模块 */
.videoBox{
   position: relative;
}
.videoBox video{
    width: 100%;
}
.videoTime{
    position: absolute;
    right: 12%;
    bottom: 36rpx;
    color: #fff;
    font-size: 20rpx;
}

js

 /**
     * 页面的初始数据
     */
data: {
     durationShow:'00:00',//时间总时长
     currentTimeShow:'00:00',//播放总进度时间
 },
timeUpdate: function (e) {
 console.log(e);
  //总时长
  let duration = parseInt(e.detail.duration)
  //播放进度时间
  let currentTime =parseInt(e.detail.currentTime)
  //由于获取的都是秒数，需要进行处理，处理成00：00的格式
  let m_d = duration >= 60 ? Math.floor(duration / 60) : 0;
  let s_d =  duration % 60;
  let durationShow = (m_d < 10 ? '0' + m_d : m_d) + ':' + (s_d < 10 ? '0' + s_d : s_d);
  // 播放时间
  let m = currentTime >= 60 ? Math.floor(currentTime / 60) : 0;
  let s =  currentTime % 60;
  let currentTimeShow = (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
  this.setData({
      currentTimeShow:currentTimeShow,
      durationShow:durationShow
  })
},

四、案例演示（视频全面显示，去除两侧黑边）

如果视频高度设置了200px，由于视频要完整显示，他的两侧就会出现黑边，那如何让视频不出现黑边，宽度占满呢？

wxml:

<!-- 视频模块 -->
 <view class="videoBox">
     <video id="myVideo" style="height:{{height}}px; width:{{width}}px;"  src="{{videoUrl}}" controls bindloadedmetadata="videometa" binderror="videoErrorCallback"></video>
 </view>

js:

 videometa: function (e) {
   var that = this;
   //获取系统信息
   wx.getSystemInfo({
       success(res) {
           //视频的高
           var height = e.detail.height;
           //视频的宽
           var width = e.detail.width;
           //算出视频的比例
           var proportion = height / width;
           //res.windowWidth为手机屏幕的宽。
           var windowWidth = res.windowWidth;
           //算出当前宽度下高度的数值
           height = proportion * windowWidth;
           that.setData({
               height,
               width: windowWidth
           });
       }
   })
},