Language: 简体中文 / English

一个基于Vue 2.0的弹幕视频播放器组件，适用于PC版网页，且视频为静态资源视频。

注：该组件为UI封装，并不涉及底层编解码，而且早期代码有点烂。

• 点击跳转预览

• 主要功能：音量和进度条、倍速、全屏、网页全屏、画中画、弹幕（部分）
• 键盘控制：（F）全屏，（↑↓）调整音量，（←→）调整进度，（空格）暂停/继续
• 视频格式：仅支持原生H5 Video所支持的视频格式，如果需要额外支持flv、mpegts, m2ts等格式，需要引用其他第三方库，例如mpegts.js；
• 获取视频dom的方式：配置ref后调用videoDom。例如ref="player"，通过this.$refs.player[0].videoDom得到视频dom。

• 格式：暂时只支持旧版B站xml弹幕格式，详细格式情况參考这篇文章
• 显示：支持滚动、顶部悬停、底部悬停三种弹幕
• 设置项：计划开发中...

• 多播放器共存
• 弹幕显示
• 网页全屏
• 更新到Vue 3.0
• 弹幕设置
• 封装成易于导入的库
• 右键查看视频数据
• 多语言支持
• 直播推流
• 适配移动端

注意：前往releases下载最新版本，且项目需要引入axios

示例代码文件：preview-videoplayer.vue

引入方式：

1. 将src/components下的四个文件复制到你的项目里，确保这四个文件保持在同一目录；
2. 将src/assets文件夹复制到项目src/里面，确保/src/assets/images/loading.svg存在（该文件为缓冲时的加载图标）
3. 在页面中导入barrage-videoplayer.vue
4. 极简代码示例：

<template>
    <barrageVideoplayer
        :src="videoSrc"
        width="100%"
        height="100%"
    ></barrageVideoplayer>
</template>
<script>
import barrageVideoplayer from "../components/barrage-videoplayer.vue";
export default {
  components: {barrageVideoplayer},
  data() {
    return {
      videoSrc: "这里是视频地址~",
    };
  },
}

barrage-videoplayer.vue

• issue

• vue、axios、mpegts.js

npm install

npm run serve

npm run build

npm run lint

See Configuration Reference.