# mpeg-video-player（简单使用）

## 项目简介

```
mpeg-video-player 包含一个视频播放组件 `MpegVideoPlayer.vue`，该组件使用插件哔哩哔哩元flv.js的开发者主导研发的进化版mpegts.js库作为支撑，同时支持H265和H264协议的FLV 格式流（HTTP-FLV / WS-FLV）流，MPEG2-TS 格式流（HTTP-TS / WS-TS）流以及M2TS 格式（蓝光TS变种） 的视频播放组件，可支持vue写法的多端应用。
```

## 下载安装

# （注意，目前最新的稳定版本是 1.0.0，因此可以直接安装 npm install mpeg-video-player@1.0.0）

```bash
npm install mpeg-video-player
```

## 使用示例（vue2 适用版本）

## 1、引入组件（在入口文件中--main.js），类似于引入 ElementUI 一样

```JS
import MpegVideoPlayer from 'mpeg-video-player'
Vue.use(MpegVideoPlayer)
```

## 2、在需要使用的页面组件中使用该组件

```vue
<template>
  <div class="video-player-container">
    <mpeg-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 | -      | 子组件创建完成后的回调函数，返回子组件的实例对象（播放器实例化对象）          | -        |

## 注意事项（由于内置 controls 不好用，建议自定义，本插件建议自定义 controls， 当然也支持使用内置 controls）

configFa 和 configBasicFa 配置项都是一个对象，用于自定义播放器的行为和样式。你可以通过分别传递 configFa 和 configBasicFa 对象来修改播放器的默认行为和样式。以下是简单常见的 configFa 对象的属性及其说明：

| 属性名        | 类型    | 默认值 | 描述                                                               |
| ------------- | ------- | ------ | ------------------------------------------------------------------ |
| hasVideo      | Boolean | true   | 是否有视频画面                                                     |
| hasAudio      | Boolean | false  | 是否有视频音效                                                     |
| isLive        | Boolean | true   | 视频播放模式（直播/非直播）                                        |
| 其他配置项... | -       | -      | 你可以根据需要添加其他配置项，参考https://github.com/xqq/mpegts.js |

## 具体播放器运用项目之后实现效果可以参考：https://blog.csdn.net/weixin_44191318/article/details/140197669?spm=1001.2014.3001.5502