Aliplayer使用dispose切换地址报错:Error in callback for watcher “url“: “TypeError: 没有为播放器指定容器“

代码:

<template>
  <div class="video-play-page">
    <div id="J_prismPlayer">
      <!-- <div class="author" v-show="isFullScreen">
        <img src="" alt="" />
        <div>
          <h3>地表最强</h3>
          <p>6787 粉丝</p>
        </div>
        <button>关注</button>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'video-play',
  props:{
    url:String,
    // video:
  },
  data() {
    return {
      player: '',
      isFullScreen:false
    };
  },

  destroyed() {
    this.player && this.player.dispose();
  },
  methods: {
    loadVideo() {
      this.player && this.player.dispose()

      console.log(this.url);

      this.buildPlayer(this.url);
    },
    buildPlayer(source) {
      const vm = this;
      vm.player = new Aliplayer(
        {
          id: 'J_prismPlayer',
          autoplay: true,
          isLive: false,
          playsinline: true,
          width: '100%',
          height: '210px',
          // 支持播放地址播放,此播放优先级最高
          source,
          playsinline: true,
          preload: true,
          controlBarVisibility: 'hover',
          useH5Prism: true, //启用H5播放器
          useFlashPrism: false,
        },
        (pl) => {
          console.log('播放器创建好了。', pl);
        }
      );
    },
  },


  watch:{
    url(){
      this.loadVideo()
    }
  }
};
</script>

原因:Aliplayer2.7.2版本,使用dispose会将id为 'J_prismPlayer'的元素删除

解决:使用2.7.4版本

找到吐血,发现是版本问题。。。。。。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值