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.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)
    }
}

效果图：