526互联

vue中vue-alipayer-v2的使用

发布时间 2023-07-27 15:03:51作者: 波仔、

项目中播放视频用到了vue-alipayer-v2，代码如下

<template>
     <VueAliplayerV2
            :source="$api.showImageUrl + playvideo.videopath"  
            ref="VueAliplayerV2"
          ></VueAliplayerV2>
</template>
<script>
import VueAliplayerV2 from "vue-aliplayer-v2";
export default {
  components: {
    VueAliplayerV2: VueAliplayerV2.Player
  }
}
</script>
source就是视频地址，这是正常用法，播放视频一般没什么问题。
我们有个需求就是可以播放手机录的视频，这下问题就来了：
1.视频播放不了，每次点击播放都是一只在加载；
2.可以正常播放，但是点击继续播放的时候播放不了，这时候就是点播放没什么反应；
原因可能就是视频一直在重新加载？因为它自己一直在刷新哈哈。
解决方法：视频播放结束后手动在初始化并暂停播放；
 <VueAliplayerV2
            :source="$api.showImageUrl + playvideo.videopath"
            @ended="endedHandle"
            ref="VueAliplayerV2"
 ></VueAliplayerV2>


methods: {
    endedHandle() {
      this.$refs.VueAliplayerV2.init();
      this.$refs.VueAliplayerV2.pause();
    }
}