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.url
state.videoTitle = router.currentRoute.value.params.title
onMounted(()=>{
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 = undefined
player.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*Alltime
let c =b/100
if(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)
}
}
效果图: