VUE2中使用阿里云播放器AliPlayer

简述

基于 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.playerTempconst 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 = falsethis.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.fullscreenServiceif(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.videoListconst 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.Titlethis.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.tagcanvas.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.base64var 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;}