回复 刷新

暂无评论

微信小程序开发实战(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组件下面放置一个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>
  • 82
  • 0
  • 0