flv-video-player
Version:
支持H264协议的WS-FLV和HTTP-FLV流视频播放组件
94 lines (74 loc) • 5.22 kB
Markdown
```
flv-video-player 包含一个视频播放组件 `FlvVideoPlayer.vue`，该组件使用哔哩哔哩开源js插件flv.js库作为支撑，支持 H264 协议的 flv格式视频播放，可支持vue写法的多端应用。
```
```bash
npm install flv-video-player
```
```JS
import FlvVideoPlayer from 'flv-video-player'
Vue.use(FlvVideoPlayer)
```
```vue
<template>
<div class="video-player-container">
<flv-video-player v-if="videoUrl" :idIndex="999" :videoUrl="videoUrl" @player-created="handlePlayerCreated" />
</div>
</template>
```
```JS
export default {
name: "VideoPlayerView",
data() {
return {
videoUrl: null,
myPlayerObj: null, // 用于存储子组件的实例对象
};
},
mounted() {
this.videoUrl = "your_video_url_here"; // 替换为实际的视频地址
},
methods: {
// index 是子组件的下标（涉及同时播放多个窗口的时候用），player 是子组件的实例对象，err 是子组件的错误标志（true表示出错，false表示无错）
handlePlayerCreated(e) {
const { index, player, err } = e;
// 此刻就可以想干什干什么了，比如调用子组件的方法，比如获取子组件的错误信息，比如获取子组件的状态等等
this.myPlayerObj = player;
},
},
};
</script>
```
```css
/* 要有宽高否则视频dom无法正常渲染，防止开发者不设置宽高导致播放窗口不显示问题，默认最小宽高插件中已经设定（width:300px; height:169px） */
.video-player-container {
width: 600px; // 根据需要调整宽度
height: 337px; // 根据需要调整高度
}
```
| 参数名 | 类型 | 默认值 | 描述 | 是否必传 |
| --------------- | -------- | ------ | ----------------------------------------------------------------------------- | -------- |
| idIndex | Number | - | 子组件的下标（涉及同时播放多个窗口的时候用） | 必传 |
| videoUrl | String | - | 视频地址 | 必传 |
| playbackRate | Number | - | 视频播放倍速（只有当 isLive 为 false 是生效，即非直播）,现代浏览器可支持 0-16 | 可选 |
| videoConfigFa | Object | - | 自定义 video 标签配置，例如 muted,controls 等 | 可选 |
| configFa | Object | - | 自定义 flv.js 配置，例如 isLive，hasAudio 等 | 可选 |
| configBasicFa | Object | - | 自定义 flv.js 配置（主要是性能的配置，一般用不上），自行百度即可 | 可选 |
| @player-created | Function | - | 子组件创建完成后的回调函数，返回子组件的实例对象（播放器实例化对象） | - |
configFa 和 configBasicFa 配置项都是一个对象，用于自定义播放器的行为和样式。你可以通过分别传递 configFa 和 configBasicFa 对象来修改播放器的默认行为和样式。以下是简单常见的 configFa 对象的属性及其说明：
| 属性名 | 类型 | 默认值 | 描述 |
| ------------- | ------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------- |
| hasVideo | Boolean | true | 是否有视频画面 |
| hasAudio | Boolean | false | 是否有视频音效 |
| isLive | Boolean | true | 视频播放模式（直播/非直播） |
| 其他配置项... | - | - | 你可以根据需要添加其他配置项，参考https://bilibili.github.io/flv.js/ ；由于哔哩哔哩早已不再对其进行官方维护所以大部分配置需要自行百度 |