收藏
回答

小程序改变视频资源src切换视频不能播放

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug VideoContext 客户端 7.0.3 2.4.4

- 当前 Bug 的表现(可附上截图)


- 预期表现


- 复现路径


- 提供一个最简复现 Demo


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


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

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

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



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


           

回答关注问题邀请回答
收藏

2 个回答

  • 小程序开发-杰罗米
    小程序开发-杰罗米
    2019-03-08

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


    2019-03-08
    有用
    回复 1
    • 北枫
      北枫
      2019-03-08

      谢谢, 我知道问题所在了, 我的视频资源的url是一个全局变量, 点击播放时给url赋值然后播放没问题, 切换到另一个页面播放第二个视频时,视频播放器拿的是之前的url并且初始化了,   点击播放的时候给url重新赋值就会出现黑屏现象,我的解决方案是切换页面后把url赋值为空,   点击播放再给url赋值, 然后播放就没问题了。

      2019-03-08
      1
      回复
  • 是小白啊
    是小白啊
    2019-03-08

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

    2019-03-08
    有用
    回复
登录 后发表内容