vue中使用alipayer播放视频

Posted 2021-05-15 教练我想打篮球

首先需要引用alipayer js和css

 

页面使用的引用方式不同

 

<template>
　　<div :id="playerId"style="width:100%; height:100%;">
　　</div>
</template>

<script>
export default {
　　name: \'Replayer\',
　　props: {
　　　　src:Object
　　},

data() {
return {
　　　　inPlayer: null,
　　　　playerId: \'replay\',
　　}
},

methods: {
　　createPlayer(src) {
　　// 确保 DOM 元素都已经渲染完毕
　　this.$nextTick(() => {
　　if (!this.inPlayer && src.vid) {
　　let vid = src.vid;
　　this.$axios.$get(url, {params: {
　　id
　　}}).then((res) => {
　　if (res.errcode != 0) {
 　　return;
　　}

const {
coverURL,
playURL,
} = res.data;
// 初始化播放器
this.inPlayer = new Aliplayer({
// 播放器 ID
id: this.playerId,
/* // 视频的 VID
vid:videoId,
// 宽度 */
width: this.width,
// 高度
height: this.height,

//封面图片
cover: coverURL,
// 使用 H5 格式
useH5Prism: true,
// 不是直播
isLive: false,
source: playURL,
// 不自动播放
autoplay: true,
"language": "zh-cn",
"playsinline": true,
"preload": true,
"extraInfo": {
"crossOrigin": "anonymous"
},
"skinLayout": [{
"name": "bigPlayButton",
"align": "blabs",
"x": 30,
"y": 80
},
{
"name": "H5Loading",
"align": "cc"
},
{
"name": "errorDisplay",
"align": "tlabs",
"x": 0,
"y": 0
},
{
"name": "infoDisplay"
},
{
"name": "tooltip",
"align": "blabs",
"x": 0,
"y": 56
},
{
"name": "thumbnail"
},
{
"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": "setting",
"align": "tr",
"x": 15,
"y": 12
},
{
"name": "volume",
"align": "tr",
"x": 5,
"y": 10
},
{
"name": "snapshot",
"align": "tr",
"x": 10,
"y": 12
}
]
}
],
controlBarVisibility: \'hover\'
}, (player) => {
this.inPlayer = player;
/* h5截图按钮, 截图成功回调 */
player.on(\'snapshoted\', function(data) {
var pictureData = data.paramData.base64
var downloadElement = document.createElement(\'a\')
downloadElement.setAttribute(\'href\', pictureData)
var fileName = \'player\' + Date.now() + \'.png\'
downloadElement.setAttribute(\'download\', fileName)
downloadElement.click()
pictureData = null
})
})

})
}
})
},
changePlaySrc(src) {
this.isWait = true;
if (this.inPlayer) {
// 存在播放器实例则先销毁组件
this.inPlayer.dispose()
// 将播放器实例重置
this.inPlayer = null
// 清空播放器 DOM 内容
document.getElementById(this.playerId).innerhtml = \'\'
}
this.createPlayer(src);
this.isWait = false;
}

}
}
</script>