简述
基于 Vue 的播放器单页应用, 利用 web 播放器 sdk 进行视频点播，包含播放列表、字幕、多语言、自适应码率，皮肤自定义等功能 Web播放器文档
前情提示
系统：
一说
- 部分截图、链接等因过期、更换域名、MD语法等可能不显示，可联系反馈（备注好博文地址），谢谢❤
- 带有
#号、删除线、不操作、不执行字样的为提示或者备份bash，实际不执行 - 如果无法下载、无法复制，请评论后留言即可。收到消息后会第一时间回复～
- 知识付费，1对1技术支持：https://www.yuque.com/janeyork/blog/qorzdcrp4gbxy82w?singleDoc#
有账号的朋友，可以点个赞或者评论两句哦，评论后会获得积分奖励～
官网文档：https://help.aliyun.com/zh/vod/developer-reference/integration?userCode=pqofinu5&type=copy
已知问题
- vue中使用截图，不太好使
- 无键盘快捷键，无法通过空格暂停播放
- 无法双击全屏
- 没有提供直接更改主题色的方式，但自己可以通过CSS更改（莫得必要）
解决思路：直接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,
qrcode: 'https://www.90%9C',
src2: 'https://ava/3456749',
bgSrc2: 'https:/rmspoVslZfWPnJuuZ.png',
bgSrc: 'htt04d064b668c4c283.jpeg',
}
},
filters: {
},
created () {
console.log('created')
},
mounted () {
console.log('mounted')
this.createDemoPlayer(this.videoList[0].source, this.videoList[0].CoverURL)
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,
'preload': true,
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']
}],
'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)
})
})
// 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
},
handleSnapshot(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
// 执行其他操作...
},
test(dataUrl,id){
console.log(dataUrl, id)
}
}
}
</script>
<style scoped>
#player-container-id {
width: 80%;
max-width: 100%;
height: 500px;
//height: 0;
//padding-top: 56.25%;
}
/deep/ #wrap {
width: 80%;
margin: 0 auto;
}
/deep/ .vjs-poster {
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: space-between;
}
/deep/ .adTextNode {
background: rgba(255, 255, 255, 0.2);
width: 44px;
height: 23px;
margin: 5px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
font-size: 12px;
}
/deep/ .adCloseIconNode {
width: 14px;
height: 14px;
display: inline-block;
margin-left: 10px;
background-image: url(/img/tmp/icon-close.png);
background-size: cover;
cursor: pointer;
margin: 6px;
}
@media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
.tcp-logo-img {
width: 50%;
}
}
@media screen and (max-width: 480px) {
#player-container-id {
width: 100%;
height: 240px;
}
}
.tcplayer {
margin: 0 auto;
}
@media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
.tcp-logo-img {
width: 50%;
}
}
@media screen and (max-width: 480px) {
#player-container-id {
width: 100%;
height: 240px;
}
}
</style>