vue弹幕视频播放器

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弹幕格式，详细格式情况參考这篇文章
显示：支持滚动、顶部悬停、底部悬停三种弹幕
设置项：计划开发中...

计划表

使用方式与示例

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

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

引入方式：

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

<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

字段	是否可选	类型	默认值	备注
src	`必选`	String	null	视频链接
cover	`可选`	String	null	自定义封面图的链接，为null则显示视频的默认封面
primaryColor	`可选`	String	"cornflowerblue"	主题色，可使用css属性值：颜色名称、#十六进制、rgb、rgba、HSL、HSLA
width	`可选`	String	100%	视频宽度，对应css样式
height	`可选`	String	100%	视频高度，对应css样式
speed_list	`可选`	array	["2.0", "1.5", "1.25", "1.0", "0.75", "0.5"]	倍速选择的列表，初始1.0倍速
biBarrageXml	`可选`	String	null	弹幕链接，使用的是旧版B站XML风格，为null则不显示弹幕；需处理跨域问题

bug反馈

issue

引用

vue、axios、mpegts.js

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

kerrinz/vue-barrage-videoplayer

vue弹幕视频播放器

简介

预览

功能支持

弹幕支持情况

计划表

使用方式与示例

传入参数

bug反馈

引用

Project setup

Compiles and hot-reloads for development

Compiles and minifies for production

Lints and fixes files

Customize configuration