在vue项目中使用阿里云播放器

在官方文档中分为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('播放器创建成功')
                });
            }