- 当前 Bug 的表现(可附上截图)
- 预期表现
- 复现路径
- 提供一个最简复现 Demo
现象: 切换新的视频回黑屏
步骤: 1. 第一次进入页面, 点击播发后请求后台接口拿到视频资源,把视频链接赋值给video的src, 在setData的回调函数里调用视频play方法, 视频可以 播放
2. 切换视频, 重新赋值video的src, 在setData的回调函数里调用play方法, 视频播放器会黑屏, 并且点击视频播放起播放按钮没有作用,
3. 接下来调用视频pause方法, 再此调用play方法, 即可以重新播放视频
总结: 目前判断是给视频资源src重新赋值后会出现此现象
可以给个代码片段吗,我自己模拟个代码片段是没啥问题,我是初始化一个url,然后在
onReady的时候赋值一个视频url,setdata后面去播放,然后点击一个按钮去修改URL,setdata后继续播放
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:
function
(res) {
this
.videoContext = wx.createVideoContext(
'myVideo'
);
this
.setData({ url:
'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
}, () => {
this
.videoContext.play()
})
},
inputValue:
''
,
data: {
url:
''
,
danmuList:
[{
text:
'第 1s 出现的弹幕'
,
color:
'#ff0000'
,
time: 1
},
{
text:
'第 3s 出现的弹幕'
,
color:
'#ff00ff'
,
time: 3
}]
},
bindInputBlur:
function
(e) {
this
.inputValue = e.detail.value
},
bindSendDanmu:
function
() {
this
.videoContext.sendDanmu({
text:
this
.inputValue,
color: getRandomColor()
})
},
changeUrl:
function
() {
console.log(
this
.videoContext)
this
.setData({ url:
'http://www.w3school.com.cn/i/movie.ogg'
}, () => { console.log(
this
.videoContext);
this
.videoContext.play() })
},
bindPlay:
function
() {
console.log(
this
.videoContext.play)
this
.videoContext.play()
},
bindPause:
function
() {
this
.videoContext.pause()
},
videoErrorCallback:
function
(e) {
console.log(
'视频错误信息:'
)
console.log(e.detail.errMsg)
}
})
大概是这样,基本跟官网的事例一样,加多了个修改url的函数
谢谢, 我知道问题所在了, 我的视频资源的url是一个全局变量, 点击播放时给url赋值然后播放没问题, 切换到另一个页面播放第二个视频时,视频播放器拿的是之前的url并且初始化了, 点击播放的时候给url重新赋值就会出现黑屏现象,我的解决方案是切换页面后把url赋值为空, 点击播放再给url赋值, 然后播放就没问题了。
提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。