vue vue-dplayer 视频播放器 自适应浏览器宽高

本文参考至文档： [前端] Vue视频组件
由于业务需要默认铺满浏览器，故做一个补充，希望能帮到大家

效果：

image.png
image.png

1.安装vue-dplayer

cnpm install vue-dplayer -S

2.在main.js中导入

import VueDPlayer from 'vue-dplayer';
import 'vue-dplayer/dist/vue-dplayer.css';
Vue.use(VueDPlayer);

3.demo

<template>
    <div id="dplayer" style="width: 100%; height: 100%"></div>
</template>

<script>
import DPlayer from 'dplayer'
export default {
  name: 'Video',
  data () {
    return {
      dp: {}
    }
  },
  mounted () {
    // 这里是业务需要地址从其它地方传过来
    var src = this.$route.query.src

    this.dp = new DPlayer({
      container: document.getElementById('dplayer'),
      theme: '#b7daff', // 风格颜色，例如播放条，音量条的颜色
      loop: false, // 是否自动循环
      lang: 'zh-cn', // 语言，'en', 'zh-cn', 'zh-tw'
      screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
      hotkey: true, // 是否支持热键，调节音量，播放，暂停等
      preload: 'auto', // 自动预加载
      volume: 0.7, // 初始化音量
      logo: '', // 在视频左脚上打一个logo
      video: {
        url: '', // 播放视频的路径
        quality: [ // 设置多个质量的视频
          {
            name: 'HD',
            url: src,
            type: 'auto' // 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或 其他自定义类型
          }
        ],
        defaultQuality: 0, // 默认是HD
        pic: '', // 视频封面图片
        thumbnails: '' // 进度条上的缩略图,需要通过dplayer-thumbnails来生成
      },
      highlight: [ // 进度条时间点高亮
        {
          text: '10M',
          time: 600
        },
        {
          text: '20M',
          time: 1200
        }
      ]
    })
  }
}
</script>