-----------支持作者请转发本文-----------

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

关注  极客起源  公众号，获得更多免费技术视频和文章。