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

迷南。 2023-03-02 05:25 61阅读 0赞

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

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所示。

![format_png][]

图1  video组件的默认效果

点击播放按钮后，开始播放视频，效果如图2所示。

![format_png 1][]

图2 video组件播放视频的效果

在前面的布局代码中，video组件还指定了binderror属性，该属性指定了如果视频文件播放出错（如路径不对），将调用的方法。该方法的代码如下：

videoErrorCallback: function (e) {
      console.log('视频错误信息:');
      console.log(e.detail.errMsg);
    }

如果视频播放出差，会在Console中输出如图3所示的日志信息。

![format_png 2][]

图3  视频错误信息

如果要让视频在装载后自动播放，需要使用autoplay属性，该属性值为true，视频会自动播放，布局代码如下：

下面看一下如何让video组件播放本地视频。首先在video组件下面放置一个button，点击该button，会弹出一个选择视频文件对话框，选择本地视频文件后，会自动在video组件中播放。布局代码如下：

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所示。

![format_png 3][]

图4  选择视频对话框（Mac OS X）

当选择一个视频文件后，会自动播放该视频，效果如图5所示。

![format_png 4][]

图5  自动播放本地视频

从日志输出结果中可以看到，本地文件名如下：

wxfile://tmp\_766585555o6zAJs2t5tIf5IgXSSAKZjRtz91g1482398885788.mp4

该文件名以wxfile开头，是小程序生成的一个临时文件，将视频文件路径直接赋给src属性也可以播放，布局代码如下：

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

![format_png 5][]

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

![format_png 6][]

[format_png]: /images/20230208/54781e349432447c92c6543e2312f29d.png
[format_png 1]: /images/20230208/193d3aae076d479b9b8c427a2a3e51b9.png
[format_png 2]: /images/20230208/e31ba7d62ad74551add785a469a607b6.png
[format_png 3]: /images/20230208/5945a2ec80d04409bc872f748a9e3f37.png
[format_png 4]: /images/20230208/8484187d9cb8445f868af04ff2b0e48b.png
[format_png 5]: /images/20230208/e59d8478c5dc48e084866e0d29f66da7.png
[format_png 6]: /images/20230208/3e6dc321dd8543bf8e13b5307516ccb8.png