微信小程序开发实战（15）：视频组件（video）
-----------支持作者请转发本文-----------
video组件用于播放网络或本地视频。video组件中最常用的属性是src，用于指定视频文件的路径，例如，下面的布局代码会播放一个网络视频文件。
<view style="margin:30px">
<text >播放网络视频</text>
<video style="margin-top:10px"
src="http://flv.bn.netease.com/videolib3/1605/22/auDfZ8781/HD/auDfZ8781-mobile.mp4" binderror="videoErrorCallback"></video>
</view>一开始运行，视频并未自动播放，效果如图1所示。
图1 video组件的默认效果
点击播放按钮后，开始播放视频，效果如图2所示。
图2 video组件播放视频的效果
在前面的布局代码中，video组件还指定了binderror属性，该属性指定了如果视频文件播放出错（如路径不对），将调用的方法。该方法的代码如下：
videoErrorCallback: function (e) {
console.log('视频错误信息:');
console.log(e.detail.errMsg);
}如果视频播放出差，会在Console中输出如图3所示的日志信息。
图3 视频错误信息
如果要让视频在装载后自动播放，需要使用autoplay属性，该属性值为true，视频会自动播放，布局代码如下：
<video … … autoplay="true"></video>下面看一下如何让video组件播放本地视频。首先在video组件下面放置一个button，点击该button，会弹出一个选择视频文件对话框，选择本地视频文件后，会自动在video组件中播放。布局代码如下：
<view style="margin:30px">
<video src="{{src}}" autoplay="true"></video>
<button bindtap="bindButtonTap">获取视频</button>
</view>video组件的src属性和src变量绑定，点击button后，会调用bindButtonTap方法，该方法的实方法如下：
Page({
data:{
src:""
},
bindButtonTap:function(){
var that = this;
wx.chooseVideo({
sourceType:['album','camera'],
maxDuration:60,
camera:['front','back'],
success:function(res){
that.setData({
src:res.tempFilePath
})
console.log(res.tempFilePath);
}
})
},
… …
})从这段代码看出，bindButtonTap通过调用wx.chooseVideo方法弹出了选择视频文件的对话框，如图4所示。
图4 选择视频对话框（Mac OS X）
当选择一个视频文件后，会自动播放该视频，效果如图5所示。
图5 自动播放本地视频
从日志输出结果中可以看到，本地文件名如下：
wxfile://tmp_766585555o6zAJs2t5tIf5IgXSSAKZjRtz91g1482398885788.mp4
该文件名以wxfile开头，是小程序生成的一个临时文件，将视频文件路径直接赋给src属性也可以播放，布局代码如下：
<view style="margin:30px">
<video src="wxfile://tmp_766585555o6zAJs2t5tIf5IgXSSAKZjRtz91g1482398885788.mp4"
autoplay="true"></video>
<button bindtap="bindButtonTap">获取视频</button>
</view>