小程序改变视频资源src切换视频不能播放
发布于 7 年前 作者 usu 3552 次浏览 来自 问答
  • 当前 Bug 的表现（可附上截图）
  • 预期表现
  • 复现路径
  • 提供一个最简复现 Demo

现象:  切换新的视频回黑屏

步骤: 1.  第一次进入页面， 点击播发后请求后台接口拿到视频资源，把视频链接赋值给video的src,  在setData的回调函数里调用视频play方法， 视频可以   播放

          2. 切换视频， 重新赋值video的src,  在setData的回调函数里调用play方法， 视频播放器会黑屏，  并且点击视频播放起播放按钮没有作用，

          3.  接下来调用视频pause方法， 再此调用play方法， 即可以重新播放视频

总结:  目前判断是给视频资源src重新赋值后会出现此现象

           

2 回复

提供一下出现问题的机型和微信版本，以及能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。

可以给个代码片段吗，我自己模拟个代码片段是没啥问题，我是初始化一个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的函数

回到顶部