简述
基于 Vue 的播放器单页应用, 利用 web 播放器 sdk 进行视频点播，包含播放列表、字幕、多语言、自适应码率，皮肤自定义等功能 Web播放器文档
已知问题
- vue中使用截图，不太好使【已自行优化】
- 无键盘快捷键，无法通过空格暂停播放【已自行优化】
- 无法双击全屏【已自行优化】
- 没有提供直接更改主题色的方式，但自己可以通过CSS更改（莫得必要）【已自行优化】
前情提示
系统：
一说
- 部分截图、链接等因过期、更换域名、MD语法等可能不显示，可联系反馈（备注好博文地址），谢谢❤
- 带有
#号、删除线、不操作、不执行字样的为提示或者备份bash，实际不执行 - 如果无法下载、无法复制，请评论后留言即可。收到消息后会第一时间回复～
- 知识付费，1对1技术支持：开放技术支持 | 需求墙 · 语雀
有账号的朋友，可以点个赞或者评论两句哦，评论后会获得积分奖励～
官网文档：Web播放器快速接入_视频点播-阿里云帮助中心
其他
解决思路：直接iframe等方式内嵌HTML写法的播放器即可。
示例代码
<template>
<page-header-wrapper>
<a-card :bordered="false">
<a-divider>MP4录播</a-divider>
<div style="width:100%;">
</div>
<div class="prism-player" id="player-con"></div>
</a-card>
</page-header-wrapper>
</template>
<script>
import { tableMixin } from '@/store/table-mixin'
import {videoList} from './js/testVideoList'
export default {
name: 'Qrcode',
components: {
},
mixins: [tableMixin],
data () {
return {
videoList: videoList,
player: null,
playingVideo: {},
loadingColor: ['#276cb3', '#f2ac1a', '#28130e', '#229849', '#db2344'],
videoLoading: true,
fullScreen: false,
}
},
filters: {
},
created () {
console.log('created')
},
mounted () {
console.log('mounted')
const url = 'https://cesium.com/public/SandcastleSampleData/big-buck-bunny_trailer.mp4'
const poster = 'https://tcplayer-1306264703.cos.ap-nanjing.myqcloud.com/picture/poster.png'
// this.createDemoPlayer(this.videoList[0].source, this.videoList[0].CoverURL)
this.createDemoPlayer(url, poster)
// this.playingVideo = videoList[0]
this.videoLoading = false
},
computed: {
},
watch: {
},
methods: {
playVideo(video) {
if (this.player === null || this.playingVideo.VideoId === video.VideoId) {
return
}
this.player.loadByUrl(video.source)
this.playingVideo = video
},
createDemoPlayer(source, cover) {
if (document.getElementById('player-con') === null) {
const playerDomWrap = this.$refs.playerTemp
const playerDom = document.createElement('div')
playerDom.setAttribute('id', 'player-con')
playerDomWrap.appendChild(playerDom)
}
const props = {
id: 'player-con',
width: '100%',
height: '485px',
language: 'zh-cn',
source: source,
isLive: false,
cover: cover,
'autoplay': false,
'rePlay': false,
'playsinline': true,
'keyShortCuts': true,
'preload': true,
'controlBarVisibility': 'hover',
'useH5Prism': true,
'extraInfo': {
'crossOrigin': 'anonymous'
},
components: [{
name: 'StartADComponent',
type: AliPlayerComponent.StartADComponent,
args: ['https://img.alicdn.com/tfs/TB1byi8afDH8KJjy1XcXXcpdXXa-1920-514.jpg', 'https://promotion.aliyun.com/ntms/act/videoai.html', 3]
}, {
name: 'PauseADComponent',
type: AliPlayerComponent.PauseADComponent,
args: ['https://img.alicdn.com/tfs/TB1byi8afDH8KJjy1XcXXcpdXXa-1920-514.jpg', 'https://promotion.aliyun.com/ntms/act/videoai.html']
}],
snapshotWatermark:{
left:'100',
top:'100',
text:'Powered By PUSDN',
font:'italic bold 12px 宋体',
strokeColor:'gray',
fillColor:'gray'
},
'skinLayout': [
{
'name': 'bigPlayButton',
'align': 'cc'
},
{
'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': 'subtitle',
'align': 'tr',
'x': 15,
'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
}
]
}
]
}
// this.player = new Aliplayer(props)
// this.player.on('requestFullScreen', this.fullScreenHandle)
// this.player.on('cancelFullScreen', this.cancelFullScreenHandel)
this.player = new Aliplayer(props, (player) => {
console.log('播放器初始化完成', player)
// 添加截图事件监听器
player.on('snapshoted', (data) => {
console.log('截图完成', data)
this.handleSnapshot(data)
})
})
let clicked = false
this.player.tag.addEventListener('click', ()=>{
console.log(this.player.getStatus())
if (!clicked) {
setTimeout(() => {
// 如果在一定时间内没有发生双击事件，执行单击事件逻辑
if (!clicked) {
console.log(this.player.getStatus())
if (this.player.getStatus() === 'pause') {
this.player.play()
} else {
this.player.pause()
}
}
clicked = false // 重置状态
}, 300) // 设置一个合适的时间间隔
}
})
this.player.tag.addEventListener('dblclick', ()=>{
clicked = true // 表示已经发生了双击事件
const service = this.player.fullscreenService
if(service.getIsFullScreen())
{
service.cancelFullScreen()
} else {
service.requestFullScreen()
}
})
// this.player.on('snapshoted', (data) => {
// console.log('截图完成', data)
// var pictureData = data.paramData.base64
// var downloadElement = document.createElement('a')
// downloadElement.setAttribute('href', pictureData)
// var fileName = 'Aliplayer' + Date.now() + '.png'
// downloadElement.setAttribute('download', fileName)
// downloadElement.click()
// pictureData = null
// })
},
playNextVideo() {
const videoList = this.videoList
const index = videoList.findIndex(item => item.VideoId === this.playingVideo.VideoId)
if (index === -1 || index === videoList.length - 1) {
// this.player.getComponent('playerTipComponent').fadeOutTip()
return
}
this.playVideo(videoList[index + 1])
},
fullScreenHandle() {
const title = this.playingVideo.Title
this.player.getComponent('playerFullScreenTitle').fullScreenHandle(title)
this.fullScreen = true
},
cancelFullScreenHandel() {
// this.player.getComponent('playerFullScreenTitle').cancelFullScreenHandle()
this.fullScreen = false
},
handleSnapshot2 (data) {
var canvas = document.createElement('canvas'),
video = this.player.tag
canvas.width =video.videoWidth,//视频原有尺寸
canvas.height = video.videoHeight//视频原有尺寸
var ctx = canvas.getContext('2d')
ctx.save()
//判断用户是否对视频做过镜像
var image = this.player.getImage()
if(image == 'vertical')//垂直镜像
{
ctx.translate(0,canvas.height)
ctx.scale(1, -1)
}
else if(image == 'horizon')//水平镜像
{
ctx.translate(canvas.width, 0)
ctx.scale(-1, 1)
}
//视频的当前画面渲染到画布上
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
ctx.restore()
},
handleSnapshot(data) {
console.log('截图完成', data)
var pictureData = data.paramData.base64
var downloadElement = document.createElement('a')
downloadElement.setAttribute('href', pictureData)
var fileName = 'Pusdn_' + Date.now() + '.png'
downloadElement.setAttribute('download', fileName)
downloadElement.click()
pictureData = null
},
}
}
</script>
<style scoped>
</style>修改皮肤
Web播放器SDK的进阶功能_视频点播-阿里云帮助中心
.prism-player .prism-liveshift-progress .prism-progress-played, .prism-player .prism-progress .prism-progress-played {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #f00;
}
额外
https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/H5VodVueDemo/README.zh_CN.md
