vue3+vue3-video-player+vue3-danmaku实现直播和弹幕

视频组件：vue3-video-player

首先下载vue3-video-player
官方文档：Vue3VideoPlay
下载：

npm i vue3-video-play --save

在main.ts/js注册

import { createApp } from "vue";
import App from "./App.vue";
import vue3videoPlay from "vue3-video-play";


const app = createApp(App)
app.use(vue3videoPlay)

 可以直接在.vue文件里引用

<template>
    <vue3VideoPlay 
        src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
        type: 'm3u8'
        height="500px"
        width="800px"
    />
</template>

它的一些配置：

const vue3VideoPlayoptions = reactive({
  type: "auto", //视频类型
  width: "100%", //播放器高度
  height: "100%", //播放器高
  muted: false, //静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: false, //是否显示控制
  speed: false,
  preload: "meta",
  controlBtns: [
    "audioTrack", //音轨切换按钮
    "quality", //视频质量切换按钮
    // "speedRate",//速率切换
    "volume", //音量
    // "setting",//设置
    "pip", //画中画按钮
    "pageFullScreen", //网页全屏按钮
    "fullScreen", //全屏按钮
  ], //显示所有按钮,
});

弹幕组件：vue3-danmaku

下载 vue3-danmaku
官方文档：vue3-danmaku 1.4.0 on npm - Libraries.io
下载：

npm install vue3-danmaku@1.4.0

不需要在main.ts/js注册，直接在.vue文件中引用

//script
import vueDanmaku from "vue3-danmaku";

const danmus = ref(['danmu1', 'danmu2', 'danmu3'])


//div
<template>
  <vue-danmaku v-model:danmus="danmus" style="height:100px; width:300px;"></vue-danmaku>
      <template v-slot:dm="{ danmu }">
        <span>{{ danmu }}</span>
      </template>
</template>

我没找到这个弹幕组件怎么发送弹幕，准确的来说是没有输出框，所以我自己弄了一个element puls的输出框和按钮

官方文档：一个 Vue 3 UI 框架 | Element Plus

//div
<div style="width: 100%; display: flex">
    <el-input
      v-model="textvalue"
      placeholder="请输入内容"
      clearable
    />
    <el-button @click="danmuadd(textvalue)" text>发送</el-button>
  </div>

//script
const textvalue = ref("");

const danmuadd = (value) => {
  console.log(value);
  danmus.push(value);
  console.log("用户当前发送的弹幕信息", value);
};

完整代码：

<template>
  <div style="width: 100%; height: 80%; position: relative">
    <vue3VideoPlay
      muted
      :width="vue3VideoPlayoptions.width"
      :height="vue3VideoPlayoptions.height"
      :src="vue3VideoPlayoptions.src"
      :type="vue3VideoPlayoptions.type"
      autoPlay
      :controlBtns="vue3VideoPlayoptions.controlBtns"
    />

    <vue-danmaku
      ref="danmaku"
      class="danmaku"
      v-model:danmus="danmus"
      :useSlot="true"
      :loop="false"
      :speeds="100"
      :channels="4"
      style="
        position: absolute;
        width: 100%;
        height: 50%;
        top: 0;
        z-index: 40000;
      "
    >
      <template v-slot:dm="{ danmu }">
        <span>{{ danmu }}</span>
      </template>
    </vue-danmaku>
  </div>
  <div style="width: 100%; display: flex">
    <el-input
      v-model="textvalue"
      placeholder="请输入内容"
      clearable
    />
    <el-button @click="danmuadd(textvalue)" text>发送</el-button>
  </div>
</template>
  
<script setup>
import { reactive, ref } from "vue";
import vueDanmaku from "vue3-danmaku";

const textvalue = ref("");
const danmus = reactive([11111, 22222222222, 3333333333]);



const danmuadd = (value) => {
  console.log(value);
  danmus.push(value);
  console.log("用户当前发送的弹幕信息", value);
};

const vue3VideoPlayoptions = reactive({
  src:"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
  type: "auto", //视频类型
  width: "100%", //播放器高度
  height: "100%", //播放器高
  muted: false, //静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: false, //是否显示控制
  speed: false,
  preload: "meta",
  controlBtns: [
    "audioTrack", //音轨切换按钮
    "quality", //视频质量切换按钮
    // "speedRate",//速率切换
    "volume", //音量
    // "setting",//设置
    "pip", //画中画按钮
    "pageFullScreen", //网页全屏按钮
    "fullScreen", //全屏按钮
  ], //显示所有按钮,
});
</script>

<style lang="scss" scoped>
</style>

效果：

我没有调整输出框和按钮的样式，在摸鱼·········，网太慢了，资源加载不出来