微信小程序开发实战（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>

对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：

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

微信小程序开发实战（15）：视频组件（video）

猜你喜欢