微信小程序video控件的使用

微信小程序video控件的使用

一、简介

video控件是微信小程序提供的系统组件之一，用于实现播放视频的功能。

二、属性

| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |

|——–|——–|——–|——–|——–|

| src | String| | 要播放视频的资源地址 | |

| initial-time| String | | 指定视频初始播放位置| 1.6.0 |

| duration |Number|| 指定视频时长 | 1.1.0 |

| controls |Boolean |true| 是否显示默认播放控件（播放/暂停按钮、播放进度、时间）| |

| danmu-list |Object Array||弹幕列表 | |

| danmu-btn |Boolean|false | 是否显示弹幕按钮，只在初始化时有效，不能动态变更| |

| enable-danmu |Boolean|false| 是否展示弹幕，只在初始化时有效，不能动态变更 | |

|autoplay|Boolean|false|是否自动播放| |

|loop|Boolean|false|是否循环播放| 1.4.0 |

|muted|Boolean|false|是否静音播放| 1.4.0 |

|page-gesture|Boolean|false|在非全屏模式下，是否开启亮度与音量调节手势|1.6.0 |

|direction|Number||设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）|1.7.0|

|bindplay|EventHandle||当开始/继续播放时触发play事件| |

|bindpause|EventHandle||当暂停播放时触发 pause 事件| |

|bindended|EventHandle||当播放到末尾时触发 ended 事件| |

|bindtimeupdate|EventHandle||播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次| |

|bindfullscreenchange|EventHandle||当视频进入和退出全屏是触发，event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal| |

|objectFit|String|contain|当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖| 1.4.0|

|poster|String||视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效| |

||||||

video 组件 默认宽度300px、高度225px，可通过wxss设置宽高。

三、相关实现api

1、wx.createVideoContext

创建并返回 video 上下文 videoContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 video 组件

2、videoContext对象

videoContext 通过 videoId 跟一个 video 组件绑定，通过它可以操作一个 video 组件。

videoContext 对象的方法列表：

| 方法 | 参数 | 说明 | 最低版本 |

|——–|——–|——–|——–|

|play | 无| 播放 | |

|pause| 无| 暂停 | |

|seek | position| 跳转到指定位置，单位 s| |

|sendDanmu|danmu|发送弹幕，danmu 包含两个属性 text, color。||

|sendDanmu|danmu|发送弹幕，danmu 包含两个属性 text, color。||

|sendDanmu|danmu|发送弹幕，danmu 包含两个属性 text, color。||

|playbackRate|rate|设置倍速播放，支持的倍率有 0.5/0.8/1.0/1.25/1.5|1.4.0|

|requestFullScreen|无|进入全屏，可传入{direction}参数（1.7.0起支持），详见video组件文档|1.4.0|

|exitFullScreen|无|退出全屏|1.4.0|

四、代码实现

在四川建设厅的代码实现中，我们未涉及弹幕功能的相关使用，所以以下代码不涉及弹幕的代码，如果想自己尝试使用，可以在官网查看其相关代码。

实现效果，如下图

实现原理：

在四川建设厅中，我们将视频播放控件进行了组件化的封装，将其放入一个名为courseVideoPlayer的组件中，组件的相关知识，可以查看佳斌写的自定义组件的实现，加以学习。

核心代码：

courseVideoPlayer.wxml

<view>

  <!--poster="{{coverImageUrl}}" -->

  <video id="myVideo" class="myVideo" src="{{playUrl}}" autoplay='false'  controls='true' bindtimeupdate='timeUpdate' bindended='endAction'>

    <!-- <cover-view bindtap='startFirstPlayAction' class='cover-view' wx:if="{{isShowCoverView}}"></cover-view>  -->

    <cover-view bindtap='_startFirstPlayAction' class='cover-view' wx:if="{{isShowCoverView}}">

      <cover-image class='cover-view' src="{{coverImageUrl}}" mode="aspectFill"/>

      <cover-image style='position:absolute; top:50%; left:50%; width:132rpx; height:132rpx; margin:-66rpx 0 0 -66rpx; z-index:10000' src="/image/video-play.png"/>

    </cover-view>

  </video>

</view>

这部分代码主要是视频界面部分，除了使用到video控件之外，我们还用到了cover-view以及cover-image组件，这两个组件的使用，在此，我做一下简单的介绍：

（1）cover-view：覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera，只支持嵌套cover-view、cover-image。

（2）cover-image：覆盖在原生组件之上的图片视图，可覆盖的原生组件同cover-view，支持嵌套在cover-view里。

属性：src String 图标路径，支持临时路径、网络地址（1.6.0起支持）。暂不支持base64格式。

按照功能来说，cover-view和cover-image实质上与普通的基础控件view与image无异，只是这两个控件特殊在，他可以覆盖在map、video、canvas、camera控件中，也正是因为这个特殊性，导致了他们在试用时也存在这一些差异，试用这两个控件的过程中，我们需要考虑以下几个注意点：

* Bug & Tips *

tip: 基础库 1.6.0 起支持css transition动画，transition-property只支持transform (translateX, translateY)与opacity。

tip: 基础库 1.6.0 起支持css opacity。

tip: 只可嵌套在原生组件map、video、canvas、camera内，避免嵌套在其他组件内。

tip: 事件模型遵循冒泡模型，但不会冒泡到原生组件。

tip: 文本建议都套上cover-view标签，避免排版错误。

tip: 只支持基本的定位、布局、文本样式。不支持设置单边的border、background-image、shadow、overflow等。

tip: 建议子节点不要溢出父节点

courseVideoPlayer.js

let studyPlayerManager = require('../../../../utils/studyManager/studyPlayerManager.js')

let currentTime = 0

let videoCtx = null

let app = getApp()

Component({

  /**

   * 组件的属性列表

   */

  properties: {

    playUrl:{

      type:String,

      value:'',

      observer: function (newVal, oldVal) {

        if (newVal.length){

          videoCtx.play()

        }

      }

    },

    totalSecondsTime:{

      type:Number,

      value:10

    },

    playInfo:{

      type: Object,

      value: {},

      observer: function (newVal, oldVal) {

      }

    },

    coverImageUrl:{

      type: String,

      value: '../../../image/course-img.jpg',

      observer: function (newVal, oldVal) {

      }

    },

    isShowCoverView:{

      type:Boolean,

      value:true,

      observer: function (newVal, oldVal) {

      }

    },

    // 初始播放时间

    initialTime : {

      type:Number,

      value:0

    }

  },



  /**

   * 组件的初始数据

   */

  data: {

    lastTime: 0,

    zindex: Math.max,

    currentTime: 0,

    isTest:false

  },

  attached: function () {

    wx.setStorageSync('lastTime', '0');

    wx.setStorageSync('maxTime', '0');

    videoCtx = wx.createVideoContext('myVideo', this)

    // 初始化toast

    new app.WeToast(this)

    studyPlayerManager.initStudyPlayerManager(this)

  },

  moved: function () {

  },

  detached: function () {

    this.studyPlayerManager.deallocStudyPlayerManager()

  },

  /**

   * 组件的方法列表

   */

  methods: {

    play() {

      videoCtx.play()

    },

    pause() {

      videoCtx.pause()

    },

    timeUpdate(e) {

      this.triggerEvent("videoTimeUpdate", e.detail.currentTime)

      var maxTime = parseInt(wx.getStorageSync('maxTime'));

      console.log('maxTime:' + maxTime);

      var lastTime = parseInt(wx.getStorageSync('lastTime'));

      console.log('lastTime:' + lastTime);

      currentTime = e.detail.currentTime;

      console.log('currentTime:' + currentTime)

      if (currentTime != 0 && ((currentTime - lastTime) < 3)) {

        wx.setStorageSync('lastTime', currentTime);

      }

      if (currentTime != 0 && currentTime > maxTime && (((currentTime - lastTime) > 0) && ((currentTime - lastTime) < 3))) {

        wx.setStorageSync('maxTime', currentTime);

        console.log('设置最大时间！')

      }

      if (!this.data.isTest && currentTime > maxTime) {

        if ((currentTime - lastTime) > 3) {

          //跳转到上次的进度

          videoCtx.seek(maxTime);

          wx.setStorageSync('lastTime', maxTime);

          this.wetoast.toast({

            title: '不能进行跳转！请认真学习'

          })

        }

      }

    },

    endAction(e) {

      let maxTime = parseInt(wx.getStorageSync('maxTime'));



      if (!this.data.isTest && ((this.properties.totalSecondsTime - maxTime) > 3)) {

        this.wetoast.toast({

          title: '不能进行跳转！请认真学习'

        })

        videoCtx.seek(maxTime)

        videoCtx.play()

      }else{

        this.triggerEvent("videoPlayEndEvent")

        this._playEndAction()

      }

    },

    fullScreenChangeAction(e) {

      console.log(e)

    },

    changeScreenTap() {

      this.videoCtx.requestFullScreen({ direction: 90 })

    },

    // 跳转到某个点

    seekToPoint(time){

      console.log('跳转到时间：'+time)

      videoCtx.seek(time)

    }

  }

})

代码中，主要实现了对video控件的进度条的拖拽进行了控制，如果在用户将进度条拖拽到还未观看过的视频位置，那么视频将会跳回到用户观看过的最大位置，并提示用户不能进装操作。

由于系统未提供video进度条拖拽的事件监听接口，我们只能“绕个弯”实现该功能。

实现的原理就是通过监听video控件开放的bindtimeupdate播放过程中的进度监听事件，我们通过监听进度条当前的进度与上一次回调的进度进行比较，如果两者之差大于3，便视为用户进行了拖拽操作，具体的代码，查看上述的timeUpdate（e）与endAction（e）事件中的相关代码。

起初，原本想自定义控制器来实现监听视频进度条拖拽的相关功能，但通过实践，我们发现，在video上的cover-view中无法嵌套系统提供的slider组件，同时在video控件上，无法进行自定义拖拽事件的监听（开发工具上可以监听，真机上无法进行监听，具体的原因还需考察），所以目前只能通过该方法实现控制拖拽进度条的操作。