vue中vue-alipayer-v2的使用

项目中播放视频用到了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();
    }
}

 

 
posted @ 2023-07-27 14:56  波仔、  阅读(443)  评论(0编辑  收藏  举报