vue中使用alipayer播放视频
首先需要引用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>