视频播放器之Dplay

只是为了单独的记录一下使用方法

Dplay 简介

• github 地址： https://github.com/MoePlayer/DPlayer
• 简介： HTML5 danmaku 视频播放器
•  支持格式： HLS FLV MD5
• 中文文档地址：http://dplayer.js.org/#/zh-Hans/

带背景图的组件

<template>
  <div class="full">
    <div class="dplayer-container" ref="player"></div>
    <div
      v-if="poster && posterIsShow"
      @click="play"
      class="cover-wraper"
      style="z-index: 10000"
    >
      <img v-if="poster" class="poster" :src="poster" alt="poster" />
      <img class="play-btn" src="./play_icon.png" />
    </div>
  </div>
</template>

实例化所使用的 js

window.Hls = require('hls.js')
import 'dplayer/dist/DPlayer.min.css' // 引入样式css
import DPlayer from 'dplayer'

export default {
  props: {
    urls: {
      type: Array,
      default: () => [] // [{url: '', name: ''}]
    },
    src: {
      type: String,
      default: ''
    },
    poster: {
      type: String, // pointer主动显示播放按钮，所以添加一个图片封面
      default: ''
    },
    label: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      posterIsShow: true
    }
  },
  computed: {
    quality() {
      // 多
      const names = {
        FD: '超清',
        LD: '高清',
        SD: '流畅'
      }
      return this.urls.map(item => ({
        url: item.play_url,
        name: names[item.definition] || item.definition
      }))
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    if (this.dp) {
      this.dp.destroy()
    }
  },
  methods: {
    init() {
      const urlObj = this.src ? { url: this.src } : { quality: this.quality }
      this.dp = new DPlayer({
        container: this.$refs.player,
        preload: 'none',
        autoplay: false,
        video: {
          ...urlObj,
          defaultQuality: 0,
          pic: this.poster,
          thumbnails: this.poster
        }
        // screenshot: true, // 截图
      })
      // this.dp.on('ended', () => {
      //   this.posterIsShow = true
      // });
      this.dp.on('play', () => {
        this.posterIsShow = false
      })
      // this.dp.on('pause', () => {
      //   this.posterIsShow = false
      // });
    },
    play() {
      if (this.dp) {
        this.dp.play()
      }
    }
  }
}

demo

<template>
  <div class="full">
    <dplayer
      :label="label"
      ref="dplayer"
      v-if="src || urls.length"
      :urls="urls"
      :src="src"
      :poster="poster"
    />
    <img v-else class="play-btn" src="./play_icon.png" />
  </div>
</template>

<script>
import Dplayer from './Dplayer.vue'

export default {
  components: {
    Dplayer
  },
  props: {
    urls: {
      type: Array,
      default: () => []
    },
    src: {
      type: String,
      default: ''
    },
    poster: {
      type: String, // pointer主动显示播放按钮，所以添加一个图片封面
      default: ''
    },
    label: {
      type: String,
      default: ''
    }
  },
  methods: {
    play() {
      if (this.$refs.dplayer) {
        this.$refs.dplayer.play()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.full {
  background-color: #f5f5f5;
  position: relative;
  .play-btn {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 70px;
    height: 70px;
  }
}
</style>