首页 > 其他分享 >vue 2.x使用视频插件dplayer

vue 2.x使用视频插件dplayer

时间:2023-03-05 20:56:40浏览次数:42  
标签:插件 vue 弹幕 Vue https import dplayer

前言:

  英文官网地址:https://dplayer.diygod.dev/

  中文官网地址:https://dplayer.diygod.dev/zh/

正文:

  1、安装插件

npm install vue-dplayer -S

  2、配置插件

   2.1、方式一(全局引入)main.js中

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

   2.2、方式二(局部引入)

<script>
    import Vue from "vue";
    import VueDPlayer from "vue-dplayer";
    import "vue-dplayer/dist/vue-dplayer.css";
    Vue.use(VueDPlayer);

</script>

  3、在自己新建的Vue组件中使用如下代码, 新建的组件明video-dplayer.vue(这里使用局部引入)

<template>
  <div class="about">
    <d-player ref="player" id="player" :options="options"></d-player>
  </div>
</template>

<script>
import Vue from "vue";
import VueDPlayer from "vue-dplayer";
import "vue-dplayer/dist/vue-dplayer.css";
Vue.use(VueDPlayer);
export default {
  name: "video-dplayer",
  data() {
    return {
      options: {
        container: document.getElementById("dplayer"),   //播放器容器
        mutex: false, //  防止同时播放多个用户,在该用户开始播放时暂停其他用户
        theme: "#b7daff", // 风格颜色,例如播放条,音量条的颜色
        loop: false, // 是否自动循环
        lang: "zh-cn", // 语言,'en', 'zh-cn', 'zh-tw'
        // screenshot: true, // 是否允许截图(按钮),点击可以自动将截图下载到本地
        hotkey: true, // 是否支持热键,调节音量,播放,暂停等
        preload: "auto", // 自动预加载
        volume: 0.7, // 初始化音量
        playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2, 3], //可选的播放速度,可自定义
        logo:
          "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左角上打一个logo
        video: {
          url: "https://media.w3.org/2010/05/sintel/trailer.mp4", // 播放视频的路径
          quality: [
            // 设置多个质量的视频
            {
              name: "高清",
              url: "https://media.w3.org/2010/05/sintel/trailer.mp4",
              type: "auto", // 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或 其他自定义类型
            },
            {
              name: "标清",
              url:
                "https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4",
              type: "auto",
            },
          ],
          defaultQuality: 0, // 默认是高清
          pic: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606462956126&di=2d87964d4faf656af55d09d938640d97&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2F201310%2F10%2F150326y7dzdd8d4kpjjdsd.jpg", // 视频封面图片
          thumbnails: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606462956126&di=2d87964d4faf656af55d09d938640d97&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2F201310%2F10%2F150326y7dzdd8d4kpjjdsd.jpg", // 进度条上的缩略图,需要通过dplayer-thumbnails来生成
        },
        // subtitle: {   //字幕
        //   url: "",   //字幕网址
        //   color:'#fff' 字幕颜色
        //   fontSize: "20px",
        //   bottom: "40px",
        // },
        danmaku: {
          // 弹幕
          id: "9E2E3368B56CDBB4",
          api: "https://api.prprpr.me/dplayer/",
          token: "tokendemo", //后端验证令牌
          maximum: 1000, //弹幕最大数量
          addition: ["https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142"], //其他弹幕
          user: "DIYgod", //弹幕用户名
          bottom: "15%", //值,例如:10px,10%,即弹幕底部和播放器底部之间的距离,以防止遮挡字幕
          unlimited: true, //即使弹幕重叠也显示所有弹幕
        },
        contextmenu: [
          //  自定义上下文菜单
          // 右键菜单
          {
            text: "custom1",
            link: "https://www.bilibili.com",
          },
          {
            text: "custom2",
            click: (player) => {
              console.log(player);
            },
          },
        ],
        highlight: [
          //进度条上的自定义时间标记
          // 进度条时间点高亮
          {
            text: "10M",
            time: 6,
          },
          {
            text: "20M",
            time: 12,
          },
        ],
      },
    };
  },
};
</script>

<style scoped>
.about {
  width: 1000px;
  height: 800px;
  margin: 0 auto;
  text-align: center;
}
</style>

  4、浏览器查看效果

 

 

   5、router文件夹下index.js添加路由路径(这里的路径是本测试项目的路径,大家使用的时候需要修改)

const routes=[
  {path: '/',name: 'video',component:()=>import('../components/video/video-dplayer')},
]

  6.打开浏览器访问即可

标签:插件,vue,弹幕,Vue,https,import,dplayer
From: https://www.cnblogs.com/Life-QX/p/17181583.html

相关文章

  • CAD几种插件安装方式,及报错版本问题
    0.双击setup.exe(源泉建议方式)1.直拖入相关如sys/下的,Setup.fas,install.vlx(海龙建议方式)2.路径添加插件:命令:op-->文件-->支持文件搜索路径-->添加插件目录sys/.即......
  • 记录Ubuntu安装Vue脚手架后找不到命令解决方法
    环境信息系统版本node.js版本安装Vue脚手架通过命令npminstall-g@vue/cli命令全局安装Vue脚手架安装完毕后,通过命令npmlist-g查看全局安装的模块,......
  • Vue3组合式API学习笔记
    setup方法与script_setup及ref响应式setup方法与script_setup在Vue3.1版本的时候,提供了setup方法;而在Vue3.2版本的时候,提供了script_setup属性。那么setup属性比setup方......
  • 在线图书借阅网站( Python +Vue 实现)
    功能介绍平台采用B/S结构,后端采用主流的Python语言进行开发,前端采用主流的Vue.js进行开发。整个平台包括前台和后台两个部分。前台功能包括:首页、图书详情页、用户中心......
  • vue项目PC端如何适配不同分辨率屏幕
    闲聊:年前小颖第一家公司同事问我有做过pc端适配的项目吗,我给妹纸说了下,结果发现没说完,自己当时也没想起来,今天干脆总结下,方便自己和大家日后查看第一步:安装postcss-px2r......
  • 关于vuex
    state:{count:0}//原始形式调用时插值表达式形式<div>{{$store.state.count}}</div>赋值函数形式是在computed中important{mapStatte}from'vuex'computed:{...map......
  • IDEA 常用插件整理
    1.codoa-代码智能提示2.KeyPromoterX-快捷键提示3.CodeGlance-显示代码缩略图4.Lombok-简化代码5.AlibabaJavaCodeingGuidelines-阿里代码规约检......
  • Chrom 常用插件
    chromecrxmouse:鼠标手势插件安装说明whistle:全新的跨平台web调试代理工具添加链接描述ProxySwitchyOmega:浏览器插件,适用于Chrome和Firefox,它可以轻松快捷地管理和......
  • IT0009.Vue.js核心技术解析与uni-app跨平台实战开发
    IT0009.Vue.js核心技术解析与uni-app跨平台实战开发  自己一面看一面跟着打的代码,蛮大,其实很多都是npm的modules链接:https://caiyun.139.com/m/i?0V5Cg5LbWDJWD ......
  • mybatis分页插件的使用
    引入依赖<dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>5.2.0</version></depend......