vue直接使用dplayer视频播放

本文详细介绍了如何使用npm或yarn安装DPlayer视频播放器,并在项目中进行引入和配置。通过示例代码展示了如何创建DPlayer实例,设置视频路径、参数,以及监听播放和时间更新事件。同时,还提供了切换播放源的方法。
摘要由CSDN通过智能技术生成

1.npm或者yarn安装dplayer

npm install dplayer --save
yarn add dplayer

2.安装后在使用页面中引入

import DPlayer from 'dplayer';

3.在页面中使用
html中

<template>
  <div>
      <div id="dplayer"></div>
  </div>
</template>

js中

methods:{
方法名(){
      this.dp = new DPlayer({
        container: document.getElementById('dplayer'),
        video: {
            url:'',  //视频路径
            pic:'./2.png'
        },
        autoplay: false,  //自动播放
        theme: '#b7daff',  //主题色
        loop: true,  //循环播放
        lang: 'zh-cn',  //语言
        // screenshot: true,  //截图
        hotkey: true,  //热键:→快进等
        preload: 'auto',  //预加载
        logo: require('./1.png'),  //左上方log
        volume: 0.7,  //默认音量
        mutex: true,  //互斥
        contextmenu: [
          {
            text: 'custom1'
          },
          {
            text: 'custom2'
          },
        ],
        // danmaku:true,
        highlight: [],
      });
      //执行API
      this.dp.on('play',  ()=> {  //开始播放
      });
      this.dp.on('timeupdate',  ()=> {//记录当前播放时间
          console.log(this.dp.video.currentTime)
      });
  },
  //切换播放源
  方法名(){
   this.dp.switchVideo({
      url:""
   })
  },
  }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值