Vue3中使用Aliplayer

1.在index.html中引入

<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.11.0/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.11.0/aliplayer-min.js"></script>

2.在相应组件中为播放器提供容器

<div class="video"><div style="width: 100%;height: 100%" id="J_prismPlayer"></div>
</div>

3.在<script>标签中实现播放器

setup(){const state = reactive({player: '',          //播放器videoUrl: '',        //视频地址videoTitle:'',       //视频标题})const router = useRouter()//路由传参state.videoUrl = router.currentRoute.value.params.urlstate.videoTitle = router.currentRoute.value.params.titleonMounted(()=>{state.player = new Aliplayer({id: "J_prismPlayer",source: state.videoUrl,width: "100%",height: "500px",/* To set an album art, you must set 'autoplay' and 'preload' to 'false' */autoplay: false,preload: false,isLive: false}, function (player) {console.log("The player is created");});})return{...toRefs(state),}
}

计算视频播放时长：

state.player = new Aliplayer({······}),function (player) {//定义变量保存时间let before = 0;//定义变量保存计时器时间let time = 0;//保存点击按钮暂停的时间let suspendTime = 0;let timer = undefinedplayer.on('play', function () {//获取相对的时间before = new Date().getTime();timer = setInterval(() => {//实时时间let now = new Date().getTime();//计时器时间 = 实时时间 - 相对时间 + 点击暂停按钮时保存的时间time = now - before + suspendTime;state.duration = time//把处理过的时间显示到content标签中}, 1000 / 60);})player.on('pause', function () {//停止计时器clearInterval(timer);//储存点击暂停的时间suspendTime = time;})}

手写记忆播放：（我获取到的进度值为0-100，所以需要把我获取的进度除以100，用视频总时长乘以处理后的进度等于上一次退出时视频播放位置，然后从此位置播放）

state.player = new Aliplayer({······}),function (player) {//获取章节观看进度let a = getChapterCurrentTime(state.chapterInfo.chapterId)//如果进度大于98%时，进度归零，从头播放if (a > 98){a = 0}//获取视频总时长const Alltime = changeTime(state.chapterInfo.videoList[0].videolength)let b = a*Alltimelet c =b/100if(c){player.seek(c)}}

空格控制视频播放与暂停，左右箭头键控制快进和快退

document.onkeydown = function (e){let key = window.event.keyCode;if (key == 32){if (state.player.getStatus() == 'playing'){state.player.pause()} else if(state.player.getStatus() == 'pause'){state.player.play()}}if (key == 39){let time = state.player.getCurrentTime()state.player.seek(time+10)}if (key == 37){let time = state.player.getCurrentTime()state.player.seek(time-10)}
}

效果图：

Vue3中使用Aliplayer相关推荐

web前端培训分享：使用Dplayer实现Vue3中的视频及弹幕播放
Dplayer是一款上手简单,功能强大的HTML5视频播放器,我们可以使用它,快速在普通HTML.Vue.React中实现视频播放的功能需求.Dplayer同时也提供了目前各大视频站都在使用的弹幕功能 ...
中input怎么接受后台传值_[vue3]如何在vue3中优雅地使用vmodel？
Vue中的数据绑定绑定数据有三种方式: 插值,也就是{{name}}的形式,以文本的形式和实例data中对应的属性进行绑定 v-bind v-model v-bind eg:v-bind:class ...
Webpack的代码分包Vue3中定义异步组件分包refs的使用
一.默认的打包过程: 默认情况下,在构建整个组件树的过程中,因为组件和组件之间是通过模块化直接依赖的,那么webpack在打包时就会将组件模块打包到一起(比如一个app.js文件中): 这个时候随着项 ...
vue3中v-model的重大更新
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件 Vue.component('custom-input', {props: ['value'],te ...
vue3 中使用动画技术
vue3 中使用动画技术作者: jcLee95 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?spm=1001.21 ...
Vue3中的父子、子父组件通信
Vue3中的父子.子父组件通信方式总结李俊才的CSDN博客 CSDN用户名:jcLee95 邮箱:291148484@163.com 1. 父组件 => 子组件 | 使用props 父组件(分 ...
vue3中 v-md-editor 编辑器的基本使用分享
vue3中 v-md-editor 编辑器的基本使用分享安装 (2.3.15以上) # npm npm install @kangc/v-md-editor -S # yarn yarn add @ ...
vue3中的provide/inject(提供/注入)
vue3中的provide/inject(提供注入) 在说provide/inject先说一下prop逐级穿透问题. 通常我们从父组件向子组件传递数据时,会用到props.对于只需要传递一层或二层时还 ...
在vue2、vue3中基于Three.js使用多张全方位照片拼接全景vr效果
在vue2.vue3中基于Three.js使用多张全方位照片拼接全景vr效果 Vue3 代码如下(示例): <template><div class="Create&quo ...

Vue3中使用Aliplayer

Vue3中使用Aliplayer相关推荐

最新文章

热门文章