微信小程序video控件的使用

微信小程序video控件的使用
- 一、简介
- 二、属性
- 三、相关实现api
  - 1、wx.createVideoContext
  - 2、videoContext对象
- 四、代码实现
  - 实现效果，如下图
  - 实现原理：

一、简介

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

二、属性

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

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

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

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

|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| |

|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| 无| 暂停 | |

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

|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 = 0let videoCtx = nulllet 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)// 初始化toastnew 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控件上，无法进行自定义拖拽事件的监听（开发工具上可以监听，真机上无法进行监听，具体的原因还需考察），所以目前只能通过该方法实现控制拖拽进度条的操作。