vue项目使用阿里云播放器 Prismplayer 组件，可记录播放时间

最新推荐文章于 2024-03-29 09:44:28 发布

VIP文章念念ovo

最新推荐文章于 2024-03-29 09:44:28 发布

阅读量2.2k

点赞数 3

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_52827704/article/details/125764765

版权

阿里云播放器相较于video标签兼容性更强，能支持更多格式的视频，所以在开发的时候阿里云播放器也用的很多

代码如下：

html代码

<template>
  <div class="player-wrapper">
    <div class="prism-player" :id="playerId"></div>
  </div>
</template>

js代码
组件传值：
必传： resource对象包含bigCover（封面）, viewPath（视频路径）
可传：isRecordPlayTime（是否记录播放时间）， lastPlayTime（上次播放时间）


<script>
const cssUrl = 'https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css'
const jsUrl = 'https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js'

export default {
   
  name: 'VideoPlayer',

  props: {
   
    resource: {
   
      type: Object,
      default: () => {
    },
    },
    isRecordPlayTime: {
   
      type: Boolean,
      default: false
    },
    lastPlayTime: {
   
      type: Number,
      default: 0
    }
  },

  components: {
   },

  computed: {
   },

  data () {
   
    return {
   
      playerId: `player-${
     Math.random().toString(36).substr(2).toLocaleUpperCase()}`,
      recordTimerInterval: 1000 * 60 * 2, // 记录播放资源的时间间隔 2分钟
      recordTimer: null
    }
  },

  filters: {
   },

  created () {
    },

  mounted () {
    },

  destroyed () {
   
    clearInterval(this.recordTimer)
  },

  watch: {
   
    resource: {
   
      handler (newValue, oldValue) {
   
        if (newValue && newValue.id) {
   
          this.$nextTick(() => {
   
            this.loadAliPlayer(