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(); } }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· .NET Core 中如何实现缓存的预热?
· 三行代码完成国际化适配,妙~啊~
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?