首页 > 其他分享 >vue中vue-alipayer-v2的使用

vue中vue-alipayer-v2的使用

时间:2023-07-27 15:13:26浏览次数:35  
标签:视频 vue VueAliplayerV2 v2 播放 alipayer

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

 

 

标签:视频,vue,VueAliplayerV2,v2,播放,alipayer
From: https://www.cnblogs.com/guozhongbo/p/17584975.html

相关文章

  • vue2.x接入mockJs
    1、安装npminstallmockjs2、创建文件src/mock/api、src/mock/indeximportMockfrom'mockjs'importMockApifrom"./api"Mock.setup({timeout:"300",});constmocks=[...MockApi];exportfunctionmockXHR(){for(letiofmocks)......
  • 【技术实战】Vue技术实战【三】
    需求实战一效果展示代码展示<template><divstyle="display:flex;"><divstyle="display:flex;justify-content:center;align-items:center;"><labelfor="input"style="font-family:Aria......
  • vue--day46---组件自定义事件的解绑
    查看vue版本命令npmlistvue1.App.vue<template><div><h1>{{msg}}</h1><!--通过父组件给子组件传递函数的props实现子给父传数据--><School:receiveSchoolName="receiveSchoolName"></School><!--v-on在student组件标签上所以说是在给......
  • Vue2的/deep/深度选择器失效了?
    /deep/在Vue2样式中的问题。太长不看:不要在VueSFC以外的地方使用/deep/。对于Vue3,请使用最新的:deep()伪类选择器。什么是/deep//deep/是Vue2中一个重要的样式选择器,可以用于选择封装好的组件内部的样式。如果直接在Vue组件上设置class属性,该属性只附加于子......
  • 创建vue项目
    1.vuecreateprojectname  2.选择vue33.创建成功 4.启动项目  5.在package.json中,查看启动命令,有时候不是npmrunserve  6.安装插件安装axios:npmiaxios安装bootstrap:[email protected]在main.j......
  • vue指令及模板语法
    说实话,看了这两节之后,改变认知的,突然发现自己落后了这么多,真不应该v- 这个指令集的确666,把许多东西的实现简化了,真心学到了不少,菜鸟这方面讲的真是不错https://www.runoob.com/vue3/vue3-directives.html我在这就不献丑了,而且里面的各种试例的可运行代码环境我非常喜欢,可以......
  • Vue第二例data 选项
    讲的主要还是附值方式,以及值的变化,总之是操作里面的数据选项还是如上节讲的建html上代码<!DOCTYPEhtml><html><head><metacharset="utf-8"/><scriptsrc="../scripts/vue.global.js"type="text/javascript"></script><tit......
  • 用CSS样式 @keyframes、animation写一个旋转立体模型、动画模型,vue2
    需求:画一个正方体,让物体一直旋转环境:vue2、css效果:代码:模型1<template>2<div>3<!--旋转立体图-->4<divclass="cube">5<divclass="facefront"></div>6<divclass="faceba......
  • Exception: Not found: 'python/cv2/py.typed'
    CopyingfilesfromCMakeoutputcreatingdirectory_skbuild/linux-x86_64-3.6/cmake-install/cv2copying_skbuild/linux-x86_64-3.6/cmake-install/python/cv2/python-3/cv2.abi3.so->_skbuild/linux-x86_64-3.6/cmake-install/cv2/cv2.abi3.socopying_skbuild/linu......
  • Vue第一个程序,经典Hello
    弄明白了简单模式的vue应用,开始应用,首先下载vue.js文件,也可以访问使用CDN方法,我是直接下载了vue.global.js,方法是NPM方法(这个在上面的官网与菜鸟都有),然后用VisualStudio建了一个空网站,新建文件夹scripts把vue.global.js放文件夹下,新建文件夹pages在这个文件夹下新建一个......