-----------支持作者请转发本文-----------
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>
对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：
关注 极客起源 公众号，获得更多免费技术视频和文章。