在官方文档中分为HTML5和Flash两种播放模式我用的是html5的播放模式,下面是阿里云官方文档

阿里云播放器的使用说明_视频点播-阿里云帮助中心

首先在index.html文件中引入


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

然后在展示界面

<template>
    <div>
        <div id="J_prismPlayer"/>
    </div>
</template>

js中

 opena(){
            new Aliplayer({
                id: 'J_prismPlayer',
                source:'播放路径',
                width: '100%', 
                height: '450px',
                // 以下可选设置  
                isLive: false, // 直播
                rePlay: false, // 循环播放
                preload: true,  //播放器自动加载
                autoplay:true,  // 自动播放
                diagnosisButtonVisible:false,//是否显示检测按钮
                keyShortCuts:true,//是否启用快捷键
                keyFastForwardStep:5,//快进快退的时间长度
                controlBarVisibility: 'hover', // 控制条的显示方式:鼠标悬停
                
                }, function (player) {
                console.log('播放器创建成功')
                });
            }

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐