VUE2中使用阿里云播放器AliPlayer

原创

BeginMind 2023-11-28 12:18:48 博主文章分类：Vue ©著作权

文章标签 vue 播放器 videojs aliplayer 文章分类 Java 后端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者BeginMind的原创作品，请联系作者获取转载授权，否则将追究法律责任

简述

基于 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: 'httE5%BA%A6%E7%83%AD%E6%90%9C',
      src2: 'https/u/3456749',
      bgSrc2: 'https/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      bgSrc: 'htt64b668c4c283.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>