微信如何与小程序的视频同时运行

百度知道

微信小程序多个视频组件同时播放

青柠姑娘17

TA获得超过3005个赞

关注

成为第581位粉丝

首先说一下我的应用场景, 在小程序中会有多个页面存在视频组件的情况, 为了防止视频播放时多个视频组件同时播放的情况,现记录一下方案:

一. 可以在需要视频播放的地方弄一个视频播放的按钮, 当视频播放的时候再初始化视频组件, 保证整个应用内只有一个视频组件(视频组件的位置需要计算), 整个方法只是理论下的情况

二. 在app.js中 设置两个对象, currentVideoId(播放视频组件的id)和videoContext(当前播放视频的对象, 通过wx.createVideoContext方法获得), 在页面的js中控制, 保证video组件绑定play方法:

<video src="url" bindplay="play"></video>

在play方法中实现即可:

var id = e.currentTarget.id

if (id != null) {

if (app.currentVideoId != id) {

if (app.videoContext != null) {

app.videoContext.stop()

console.warn("暂停")

}

app.currentVideoId = id

app.videoContext = wx.createVideoContext(id)

}

}

因为currentVideoId 和videoContext是唯一的对象, 方法中播放监听事件会暂停之前的播放, 然后再赋值, 等下次video播放监听进来的时候, 会进行判断

三. 包含富文本组件的视频组件同时播放的情况

依据上面的例子, 当自定义富文本组件中包含多个video组件时也用上面的方法会产生错误, 虽然log会显示将执行视频暂停或者停止播放, 但是没有效果, 查看 视频api , 提示

根据api显示, id为video组件的id, 还有一个"Object this", 但是依据上面的api使用, 直接用id确实可以获取video对象, 但是api解释中提示, "在自定义组件下，当前组件实例的this，以 *** 作组件内 video组件", 在自定义组件中, 要加this, 所以总结: 在上面api使用中, 如果video在pages页面中, wx.createVideoContext参数只写id没有问题, 但是当video在自定义组件中, 要必须加this, 才能正确返回VideoContext对象

做一个款短视频拍摄的微信小程序，看了下微信接口，以为很简单，大致步骤开始拍摄，停止拍摄，保存，就结束了，谁知道做的过程中发现一些问题。

先看下我做的大概样式

开始调用wx.startRecord()事件后，timeoutCallback方法好像并不会随着wx.stopRecord()的调用而销毁。具体情况复现流程为，拍摄15s中视频后，停止拍摄，在下次开始拍摄后，时间大于15s，其实是在同一个camera实例触发多次录像事件，会累计多次拍摄的时长，然后触发timeoutCallback事件，而造成后续触发stopRecord失效，导致录像保存失败。

解决方法，如果不是多次拍摄保存为一条视频，那么每次拍摄的时候创建一个新的camera实例

微信小程序录像默认时长是30s，如果录像时长超过会触发timeoutCallback。但是有一种情况在录像时间达到27s～28s，自己触发wx.stopRecord()偶尔会保存失败，或者调用无反应。经过多次测试发现，在自己调用wx.stopRecord()保存视频的时候，先触发了timeoutCallback，所以要考虑视频保存到本地的时间。

解决方法，如果需要自己手动保存视频，建议安全时间为25s左右。

在小程序做录像功能要有三个授权，第一是摄像头授权，第二是相册授权(保存文件用)，第三是录音授权。

因为抖音的 *** 作习惯，一个按钮两个功能，单击为拍照，长按为拍摄视频。单击拍照因为打开小程序的时候，默认就强制要求开通权限，所以在长按按钮会d出录音授权的系统d窗。

长按按钮开始录像功能，手指松开录像结束，保存文件。但是在长按触发录音授权的系统d窗，我以为会触发touchend或者touchcancel事件，但是测试后发现授权的系统d窗d出后，touchcancel并不会触发，而在关闭系统d窗后会触发touchend。

解决方法，严格控制逻辑中的事件触发时间点和触发方式。

卡，实在是卡，不建议在cover-view中使用css动画

还有其他多少琐碎问题，就靠大家自行发觉了。

---