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(); } }