使用dplayer实现直播方案

使用dplayer实现直播方案

1. 安装相关依赖 dplayer hls.js

2. 直接在组件中使用

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

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import DPlayer from 'dplayer';
// 插件实例
let dp = ref<any>(null)
// 播放器实例
const dplayer = ref<any>(null)

onMounted(() => {
  dp.value = new DPlayer({
    container: dplayer.value,
    // 是否直播
    live: true,
    // 视频地址
    video: {
      type: "customHls",
      customType: {
        customHls: function (video, player) {
          const hls = new Hls();
          const url = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
          hls.loadSource(url);
          hls.attachMedia(video);
        },
      }
    },
    // 自定义右键内容
    contextmenu: [
      {
        text: '主页',
        link: 'https://github.com/DIYgod/DPlayer',
      },
      {
        text: '点击',
        click: (player: Event) => {
          console.log(player);
        },
      },
    ],
    // 弹幕开关
    danmaku: true,
    // 弹幕相关 此模块在直播时生效
    apiBackend: {
      read: function (options: any) {
        // 请求接口获取全部的弹幕 直播开始时播放
        const data = [{
          "time": 0,
          "text": "测试11",
          "color": 16777215,
          "player": null,
          "type": 0,
          "author": "YU4324234234"
        },
        {
          "time": 0,
          "text": "测试22",
          "color": 16777215,
          "player": null,
          "type": 0,
          "author": "YU4324234234"
        }]
        options.success(data);
      },
      send: function (options: any) {
        // options.data 为发送的弹幕数据 应该请求接口存到数据库并且审核
        console.log('用户输入的弹幕', options.data);
        // 发送弹幕
        options.success([options.data]);
      },
    }
  });
})

</script>

<style>
/* 清除默认右键 */
.dplayer-menu {
  .dplayer-menu-item {

    &:nth-last-child(1),
    &:nth-last-child(2),
    &:nth-last-child(3) {
      display: none;
    }
  }
}

/* 清除默认动画 */
.dplayer-danmaku .dplayer-danmaku-right {
  animation: danmaku 5s linear !important;
}

/* 清除默认动画 */
.dplayer-danmaku .dplayer-danmaku-top {
  animation: danmaku-center 5s linear !important;
}

/* 清除默认动画 */
.dplayer-danmaku .dplayer-danmaku-left {
  animation: danmaku 5s linear !important;
}

/* 清除默认动画 */
.dplayer-danmaku .dplayer-danmaku-bottom {
  animation: danmaku-center 5s linear !important;
}
</style>