Closed seasonl2014 closed 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>
后期会考虑做下组件
好的,谢谢,我试试看
好像不行,会报错:Cannot find name 'Aliplayer'.
`ERROR in src/views/video/index.vue:12:24 TS2304: Cannot find name 'Aliplayer'. 10 | setup() { 11 | onMounted(() => {
12 | var player = new Aliplayer({ | ^^^^^^^^^ 13 | id: 'J_prismPlayer', 14 | width: '100%', 15 | autoplay: true, `
`ERROR in src/views/video/index.vue:12:24 TS2304: Cannot find name 'Aliplayer'. 10 | setup() { 11 | onMounted(() => {
12 | var player = new Aliplayer({ | ^^^^^^^^^ 13 | id: 'J_prismPlayer', 14 | width: '100%', 15 | autoplay: true, `
是可以的,报这个错的原因是因为 TypeScript
自检,你可以做以下修改:
一、添加 TS interface 在 https://github.com/lqsong/admin-element-vue/blob/typescript.v2/src/shims-vue.d.ts 文件添加以下内容:
interface Window {
Aliplayer: any;
}
二、 new Aliplayer
改成 new window.Aliplayer
,即可。
真的可以了,谢谢
我现在用这个admin-element-vue项目做一个在线教育平台,需要用到阿里云视频播放器Aliplayer,应该如何整合进来呢?