lqsong
commented
3 years ago 目前你可以在：
https://github.com/lqsong/admin-element-vue/blob/typescript.v2/public/index.html
新增如下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!--新增代码 start-->
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"></script>
<!--新增代码 end-->
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>然后在你需要的页面 video.vue
<template>
<div class="indexlayout-main-conent">
<div class="prism-player" id="J_prismPlayer"></div>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from "vue";
export default defineComponent({
setup() {
onMounted(() => {
var player = new Aliplayer({
id: 'J_prismPlayer',
width: '100%',
autoplay: true,
//支持播放地址播放,此播放优先级最高
source : '播放url',
//播放方式二：点播用户推荐
vid : '1e067a2831b641db90d570b6480fbc40',
playauth : 'ddd',
cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
encryptType:1, //当播放私有加密流时需要设置。
//播放方式三：仅MPS用户使用
vid : '1e067a2831b641db90d570b6480fbc40',
accId: 'dd',
accSecret: 'dd',
stsToken: 'dd',
domainRegion: 'dd',
authInfo: 'dd',
//播放方式四：使用STS方式播放
vid : '1e067a2831b641db90d570b6480fbc40',
accessKeyId: 'dd',
securityToken: 'dd',
accessKeySecret: 'dd',
region:'cn-shanghai',//eu-central-1,ap-southeast-1
},function(player){
console.log('播放器创建好了。')
});
})
}
})
</script>后期会考虑做下组件
seasonl2014
我现在用这个admin-element-vue项目做一个在线教育平台，需要用到阿里云视频播放器Aliplayer，应该如何整合进来呢？