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.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;
    }