十二：video 视频

Posted 2020-08-20 淡定君

属性名	类型	默认值	说明
src	String		要播放视频的资源地址
controls	Boolean	true	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
danmu-list	Object Array		弹幕列表
danmu-btn	Boolean	false	是否显示弹幕按钮，只在初始化时有效，不能动态变更
enable-danmu	Boolean	false	是否展示弹幕，只在初始化时有效，不能动态变更
autoplay	Boolean	false	是否自动播放
bindplay	EventHandle		当开始/继续播放时触发play事件
bindpause	EventHandle		当暂停播放时触发 pause 事件
bindended	EventHandle		当播放到末尾时触发 ended 事件
binderror	EventHandle		当发生错误时触发error事件，event.detail = {errMsg: ‘something wrong‘}

先写个代码。

/* ---示例代码----*/   <view>   <video id="myVideo" src="{{src}}" binderror="videoErrorCallback" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>   <view>     <button bindtap="bindSendDanmu">发送弹幕</button>   </view> </view>   /* ---示例代码----*/

/* ---示例代码----*/   Page({   data:{     src:"http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400",     danmuList:[       {text: ‘第 1s 出现的弹幕‘,color: ‘red‘,time: 1},       {text: ‘第 3s 出现的弹幕‘,color: ‘#000‘,time: 3}     ]   },   onReady:function(){     this.videoContext = wx.createVideoContext(‘myVideo‘);   },   videoErrorCallback:function(e){       console.log(‘视频错误信息:‘+e.detail.errMsg)     },   bindSendDanmu:function(){     this.videoContext.sendDanmu({       text: ‘测试弹幕‘,       color: ‘blue‘     })   } })   /* ---示例代码----*/

这里把微信api分开写了 比较好理解。其实那些事件和audio的一样。。video只不过在属性上增加了弹幕功能。

之后看一下获取视频的 api 

wx.chooseVideo(OBJECT)

拍摄视频或从手机相册中选视频，返回视频的临时文件路径。

OBJECT参数说明：

参数	类型	必填	说明
sourceType	StringArray	否	album 从相册选视频，camera 使用相机拍摄，默认为：[‘album‘, ‘camera‘]
maxDuration	Number	否	拍摄视频最长拍摄时间，单位秒。最长支持60秒
camera	StringArray	否	前置或者后置摄像头，默认为前后都有，即：[‘front‘, ‘back‘]
success	Function	否	接口调用成功，返回视频文件的临时文件路径，详见返回参数说明
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

返回参数说明：

参数	说明
tempFilePath	选定视频的临时文件路径
duration	选定视频的时间长度
size	选定视频的数据量大小
height	返回选定视频的长
width	返回选定视频的宽

注：文件的临时路径，在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用 wx.saveFile，在小程序下次启动时才能访问得到。

 

写到这里也就要告一段落了。。所有的讲解说白了也只是整理一下代码而已。总体来说的话掌握了angular2的语法和，ionic1的写法基本上

微信小程序也就不是那么难理解了。。而且越往后写越感觉没有必要了，所以上面讲解的一些，都是跟标签有关的东西，

而且剩下的代码基本上就是逻辑了上的修改和代码的运用了。剩下的代码js基础好的也能看懂了。不管说到哪里，按照api的规则和模范总不会出现问题的。。

话又说回来。。。因为写法的简便。比angular2要容易理解很多。所以新手需要掌握的 html css 数据绑定 和事件的调用。