uniapp怎么引入阿里播放器,我要代码
时间: 2023-05-12 14:05:22 浏览: 383
您可以按照以下步骤引入阿里播放器:
1. 在项目根目录下的 `manifest.json` 文件中添加以下代码:
```json
"app-plus": {
"modules": {
"aliplayer": {
"version": "1.0.0",
"provider": "alibaba"
}
}
}
```
2. 在需要使用阿里播放器的页面中,引入 `aliplayer` 模块:
```javascript
import aliplayer from '@ali/aliplayer';
export default {
components: {
aliplayer
},
// ...
}
```
3. 在页面中使用 `aliplayer` 组件,并传入相关参数:
```html
<template>
<aliplayer :source="source" :config="config" />
</template>
<script>
export default {
data() {
return {
source: {
vid: 'your_video_id',
playauth: 'your_play_auth',
},
config: {
width: '100%',
height: '300px',
autoplay: false,
isLive: false,
rePlay: false,
playsinline: true,
preload: true,
controlBarVisibility: 'hover',
useH5Prism: true,
skinLayout: [
{
name: 'bigPlayButton',
align: 'cc',
x: 30,
y: 80,
},
{
name: 'H5Loading',
align: 'cc',
x: 0,
y: 0,
},
{
name: 'errorDisplay',
align: 'tlabs',
x: 0,
y: 0,
},
{
name: 'infoDisplay',
align: 'cc',
x: 0,
y: 0,
},
{
name: 'tooltip',
align: 'blabs',
x: 0,
y: 56,
},
{
name: 'thumbnail',
align: 'tr',
x: 12,
y: 36,
},
{
name: 'controlBar',
align: 'blabs',
x: 0,
y: 0,
children: [
{
name: 'progress',
align: 'blabs',
x: 0,
y: 44,
},
{
name: 'playButton',
align: 'tl',
x: 15,
y: 12,
},
{
name: 'timeDisplay',
align: 'tl',
x: 10,
y: 7,
},
{
name: 'fullScreenButton',
align: 'tr',
x: 10,
y: 12,
},
{
name: 'volume',
align: 'tr',
x: 5,
y: 10,
},
],
},
],
},
};
},
};
</script>
```
请注意,以上代码仅供参考,您需要根据自己的实际情况进行调整。
阅读全文