dplayer播放视频（自动播放）。vue视频插件

news2024/9/21 16:44:16

需求：播放视频，技术框架vue3+element plus。因为前人项目用到了dplayer这个组件。发现还挺好用的。推荐使用

dplayer官网

使用方法（直接上代码了）

封装的方法

import DPlayer from 'dplayer';

// 初始化播放器flv格式
export function initPlayer(
  videoUrl: string,
  videoPic = '',
  isLive = false,
  playerId = 'dplayer',
  autoplay?: number,
) {
  var flvPlayer: any = null;
  const dp: any = new DPlayer({
    container: document.getElementById(playerId),
    live: isLive, // 	开启直播模式
    autoplay: autoplay ? false : true, //视频自动播放
    theme: '#FADFA3', //主题色
    loop: true, //视频循环播放
    lang: 'en', //可选值: 'en', 'zh-cn', 'zh-tw'
    screenshot: false, //开启截图，如果开启，视频和视频封面需要允许跨域
    hotkey: false, //开启热键，支持快进、快退、音量控制、播放暂停
    preload: 'auto',
    preventClickToggle: autoplay ? false : true, //阻止点击播放器时候自动切换播放/暂停
    volume: 0,
    mutex: false, //  防止同时播放多个用户，在该用户开始播放时暂停其他用户
    video: {
      url: videoUrl,
      pic: videoPic,
      type: 'customFlv',
      customType: {
        customFlv: function (video: any, player: any) {
          console.log('查看传递的参数', video, player);
          flvPlayer = Flv.createPlayer({
            type: 'flv',
            url: video.src,
          });
          flvPlayer.attachMediaElement(video);
          flvPlayer.load();
        },
      },
    },
  });

  dp.on('error', function () {
    console.log('212423244');
  });
  return { dp: dp, flv: flvPlayer };
}

// 初始化播放器MP4格式
export function initPlayerMP4(
  videoUrl: string,
  videoPic = '',
  playerId = 'dplayer',
  autoplay?: number,
) {
  const dp: any = new DPlayer({
    container: document.getElementById(playerId),
    autoplay: autoplay ? false : true, //视频自动播放
    theme: '#FADFA3', //主题色
    loop: true, //视频循环播放
    lang: 'en', //可选值: 'en', 'zh-cn', 'zh-tw'
    screenshot: false, //开启截图，如果开启，视频和视频封面需要允许跨域
    hotkey: false, //开启热键，支持快进、快退、音量控制、播放暂停
    preload: 'auto',
    preventClickToggle: autoplay ? false : true, //阻止点击播放器时候自动切换播放/暂停
    volume: 0,
    mutex: true,
    video: {
      url: videoUrl,
      pic: videoPic,
      type: 'auto',
    },
  });
  return { dp: dp, flv: null };
}

vue文件中使用

  import { initPlayerMP4, initPlayer } from 'yourpath';
  const dp = ref<any>();
  if(type==".mp4"){
     dp.value = initPlayerMP4(
          fileName!,
          getTotal.value?.items[getCurrent.value - 1]?.snapshot,
          'dplayer',
          2,
          );
   }else if(type==".flv"){
	 dp.value = initPlayer(
          fileName!,
          getTotal.value?.items[getCurrent.value - 1]?.snapshot,
          false,
          'dplayer',
          2,
          );
   }

       <div style="height: 70vh" ref="dp"></div>