公告列表
公告列表
收藏
回答

小程序Component组件中videoContext播放失败？

每个模块用的是一个Component，相同的代码，如果我把他放在index页面上，videoContext的play事件就能自动调起，需求需要将video放在Component里，videoContext的play事件就不能自动调起播放事件如下

<view wx:for="{{list}}">
    <view>
       <video id="index{{index}}" src="{{item.video_url}}" wx:if="{{playIndex==index}}"></video>
    </view>
    <view id="{{index}}" class="cover" style="display: {{playIndex==index?'none':'block'}};" bindtap="videoPlay">
      <image class="coverImg" src="{{item.poster}}" mode="scaleToFill">
        <image class="playImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524569209313&di=ed6fbf799d057b1e2b4047276d35fc76&imgtype=0&src=http%3A%2F%2Fpic.orsoon.com%2Fuploads%2Fallimg%2F1601%2F24-1601021621070-L.png" mode="scaleToFill"></image>
      </image>
    </view>
</view>
/**
 * 组件的初始数据
 */
data: {
    list: [
        { isPlaying: false, type: 1, title: "历史“", poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525153967&di=3191960263be63b5b5e74d88f3bb5f80&imgtype=jpg&er=1&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F32afc2a2c9b949a5e936b1a48a6f516744636211.jpg', video_url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400' },
        { isPlaying: false, title: "新疆", poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525153967&di=3191960263be63b5b5e74d88f3bb5f80&imgtype=jpg&er=1&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F32afc2a2c9b949a5e936b1a48a6f516744636211.jpg', video_url: 'https://shop-1256250812.cos.ap-beijing.myqcloud.com/upload/media/201909/b344413c-7585-4574-979e-c7e83ab9b401.mp4' },
        { isPlaying: false, title: "朝鲜", poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525153967&di=3191960263be63b5b5e74d88f3bb5f80&imgtype=jpg&er=1&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F32afc2a2c9b949a5e936b1a48a6f516744636211.jpg', text: "撒可富杀立刻发水立方索拉卡附近撒联发科吉林省大开发沙龙东方科技奥斯发离开家啊", video_url: 'http://tbm.alicdn.com/Uob6TqgDJuggjUaP6bv/NNtoO48LH9fensAkefH%40%40sdregop.mp4' },
        { isPlaying: false, title: "会议", poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525153967&di=3191960263be63b5b5e74d88f3bb5f80&imgtype=jpg&er=1&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F32afc2a2c9b949a5e936b1a48a6f516744636211.jpg', text: "撒可富杀立刻发水立方索拉卡附近撒联发科吉林省大开发沙龙东方科技奥斯发离开家啊", video_url: 'http://tbm.alicdn.com/Uob6TqgDJuggjUaP6bv/NNtoO48LH9fensAkefH%40%40sdregop.mp4' },
        { isPlaying: false, title: "万里", poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525153967&di=3191960263be63b5b5e74d88f3bb5f80&imgtype=jpg&er=1&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F32afc2a2c9b949a5e936b1a48a6f516744636211.jpg', text: "撒可富杀立刻发水立方索拉卡附近撒联发科吉林省大开发沙龙东方科技奥斯发离开家啊", video_url: 'http://tbm.alicdn.com/Uob6TqgDJuggjUaP6bv/NNtoO48LH9fensAkefH%40%40sdregop.mp4' },
        { isPlaying: false, title: "自治区", poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525153967&di=3191960263be63b5b5e74d88f3bb5f80&imgtype=jpg&er=1&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F32afc2a2c9b949a5e936b1a48a6f516744636211.jpg', text: "撒可富杀立刻发水立方索拉卡附近撒联发科吉林省大开发沙龙东方科技奥斯发离开家啊", video_url: 'http://tbm.alicdn.com/Uob6TqgDJuggjUaP6bv/NNtoO48LH9fensAkefH%40%40sdregop.mp4' },
    ]
 
 
},
 
/**
 * 组件的方法列表
 */
methods: {
    // 点击cover播放，其它视频结束
    videoPlay: function (e) {
        var id = e.currentTarget.id
        if (!this.data.playIndex) { // 没有播放时播放视频
            this.setData({
                playIndex: id
            })
            console.log(['index', id].join(''))
            var videoContext = wx.createVideoContext(['index', id].join(''))
            console.log(videoContext)
            videoContext.play()
        } else {                    // 有播放时先将prev暂停到0s，再播放当前点击的current
            var videoContextPrev = wx.createVideoContext(['index', this.data.playIndex].join(''))
            videoContextPrev.seek(0)
            videoContextPrev.pause()
            this.setData({
                playIndex: id
            })
            var videoContextCurrent = wx.createVideoContext(['index', this.data.playIndex].join(''))
            videoContextCurrent.play()
        }
    }
 
}

代码片段：https://developers.weixin.qq.com/s/5jOCbXmc7KbP

最后一次编辑于  2019-10-08
回答关注问题邀请回答
收藏

1 个回答

  • 是小白啊
    是小白啊
    2019-10-08


    2019-10-08
    有用 1
    回复 7
    • 东海
      东海
      2019-10-08
      谢谢，灰常感谢
      2019-10-08
      赞
      回复
    • 东海
      东海
      2019-10-08
      还是有问题，这个bug是怎么回事，点击完第一个视频，在点击第二个视频，播放时正常的，但是在点击第一个视频的时候，有视频声音，说明.play()函数执行了，但是页面是黑屏，最出事video的样子，麻烦您看一下代码片段https://developers.weixin.qq.com/s/8t34wYmf7Mby
      2019-10-08
      赞
      回复
    • 玄影Josiah
      玄影Josiah
      2019-12-22回复东海
      能问问怎么弄么
      2019-12-22
      赞
      回复
    • 玄影Josiah
      玄影Josiah
      2019-12-22回复东海
      我也知道了...
      2019-12-22
      赞
      回复
    • 2020-04-21回复东海
      这里的this你是怎么处理的
      2020-04-21
      赞
      回复
    查看更多(2)
请 登录 后发表内容
相关问题
相关文档
问题标签
componentlist代码context调起