1、视频
小程序提供了.createVideoContext(string id,Object this)、.chooseVideo(Object object)、.saveVideoToPhotosAlbum(Object object)等接口对手机视频进行操作。
1.1 .createVideoContext(string id,Object this)接口创建 video 上下文 VideoContext 对象。
语法如下：
this.videoContext=.createVideoContext(myVideo)1.1.2 VideoContext对象常用函数接口功能和用途VideoContext.play()播放视频VideoContext.pause()暂停视频VideoContext.stop()停止视频VideoContext.seek(number position)跳转到指定位置(单位,s)VideoContext.sendDanmu(Object data)发送弹幕VideoContext.playbackRate(number rate)设置倍速播放VideoContext.requestFullScreen(Object object)进入全屏。若有自定义内容需在全屏时展示，需将内容节点放置到 video 节点内。VideoContext.exitFullScreen()退出全屏VideoContext.showStatusBar()显示状态栏，仅在iOS全屏下有效VideoContext.hideStatusBar()隐藏状态栏，仅在iOS全屏下有效1.1.3 小案例本例使用.createVideoContext()创建Video上下文videoContext对象，然后再对食品进行发送弹幕、播放、暂停、定位和回滚操作。
createVideoContext.ml
<view class="section tc"> <video id="myVideo" src="http://snsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=fca905ce620b1241b726bc41dcff44e&bizid=1023&hy=SH&fileparam=302cffde3c4ff02024efe8d7f02030fa320a" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls ></video> <view class="btn-area"> <input bindblur="bindInputBlur" /> <button bindtap="bindSendDanmu">发送弹幕</button> </view> </view> <button type="primary" bindtap="audioPlay">播放</button> <button type="primary" bindtap="audioPause">暂停</button> <button type="primary" bindtap="audio14">跳到2分钟位置</button> <button type="primary" bindtap="audioStart">回到开头</button>createVideoContext.js
function getRandomColor() { const rgb = [] for (let i = 0; i < 3; ++i) { let color = Math.floor(Math.random() * 256).toString(16) color = color.length == 1 ? 0 + color : color rgb.push(color) } return # + rgb.join() } Page({ onReady(res) { this.videoContext = .createVideoContext(myVideo) }, inputValue: , data: { src: , danmuList: [ { text: 第 1s 出现的弹幕, color: #ff0000, time: 1 }, { text: 第 3s 出现的弹幕, color: #ff00ff, time: 3 }] }, bindInputBlur(e) { this.inputValue = e.detail.value }, bindSendDanmu() { this.videoContext.sendDanmu({ text: this.inputValue, color: getRandomColor() }) }, audioPlay: function () { this.videoContext.play()//播放 }, audioPause: function () { this.videoContext.pause() //暂停 }, audio14: function () { this.videoContext.seek(120) //跳转到120秒处 }, audioStart: function () { this.videoContext.seek(0) //回到开头 } })
播放
跳转到2分钟位置：
回到开头：
拍摄视频或从手机相册中选视频。.chooseVideo()接口参数如表所示。
属性类型默认值必填说明最低版本sourceTypeArray.<string>[album, camera]否视频选择的来源album从相册选择视频camera使用相机拍摄视频compressedbooleantrue否是否压缩所选择的视频文件1.6.0maxDurationnumber60否拍摄视频最长拍摄时间，单位秒camerastringback否默认拉起的是前置或者后置摄像头。部分 Android 手机下由于系统 ROM 不支持无法生效successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）object.success 回调函数参数Object res属性类型说明tempFilePathstring选定视频的临时文件路径 (本地路径)durationnumber选定视频的时间长度sizenumber选定视频的数据量大小heightnumber返回选定视频的高度widthnumber返回选定视频的宽度示例代码 .chooseVideo({ sourceType: [album,camera], maxDuration: 60, camera: back, success(res) { console.log(res.tempFilePath) } })1.2.1 小案例本例使用.chooseVideo()接口选中手机上的某一视频，然后对选中的视频进行播放操作。
chooseVideo.ml
<view class="section tc"> <video id="myVideo" src="{{src}}" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls ></video> </view> <button type="primary" bindtap="uploadvideo">上传视频</button> <button type="primary" bindtap="audioPlay">播放</button>chooseVideo.js
Page({ onReady(res) { }, inputValue: , data: { src: http://snsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=fca905ce620b1241b726bc41dcff44e&bizid=1023&hy=SH&fileparam=302cffde3c4ff02024efe8d7f02030fa320a }, uploadvideo: function () { var that=this; .chooseVideo({ sourceType: [album, camera], maxDuration: 60, camera: back, success(res) { that.setData({ src: res.tempFilePath }) console.log(that.data.src) } }) }, audioPlay: function () { this.videoContext = .createVideoContext(myVideo) this.videoContext.play() } })sourceType:[album,camera]说明可以选择手机上的视频，也可以及时拍摄视频。在选择了新视频之后采用.createVideoContext()来获取VideoContext对象，使用this.videoContext.play()来播放选择的视频。
点击上传视频
点击播放(可以正常播放，测试正常)
该接口保存视频到系统相册。支持mp4视频格式。
属性类型默认值必填说明filePathstring是视频文件路径，可以是临时文件路径也可以是永久文件路径 (本地路径)successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）1.3.1 案例本例使用.saveVideoToPhotosAlbum(Object object)接口保存一个视频到手机视频库中。
saveVideo.ml
<view class="section tc"> <video id="myVideo" src="{{src}}" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video> </view> <button type="primary" bindtap="save">保存视频</button>saveVideo.js
Page({ inputValue: , data: { src: http://snsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=fca905ce620b1241b726bc41dcff44e&bizid=1023&hy=SH&fileparam=302cffde3c4ff02024efe8d7f02030fa320a }, save: function () { var that=this; .downloadFile({ url: http://snsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=fca905ce620b1241b726bc41dcff44e&bizid=1023&hy=SH&fileparam=302cffde3c4ff02024efe8d7f02030fa320a, //仅为示例，并非真实的资源 success: function (res) { // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容 if (res.statusCode === 200) { .saveVideoToPhotosAlbum({ filePath: res.tempFilePath, success(res) { .showToast({ title: 保存视频成功！, }) }, fail(res) { .showToast({ title: 保存图片失败！, }) } }) } } }) } })
点击保存视频
我这里用的开发者工具模拟的，手机上面操作也是一样的。