vue3 + video.js 加载多种视频流(HLS、FLV、RTMP、RTSP)封装开箱及用，发布npm

首先，这个问题涉及到的是如何在Vue3中使用video.js来处理不同的视频流。Video.js是一个使用HTML5和Flash技术构建的Web视频播放器，它支持HLS、FLV、RTMP和RTSP等多种视频流格式。

解决方案：

1. 安装video.js和videojs-contrib-hls插件，因为HLS不是video.js默认支持的格式。

npm install video.js
npm install videojs-contrib-hls

2. 在Vue组件中引入video.js和videojs-contrib-hls。

import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import 'videojs-contrib-hls';

3. 在组件的模板中添加video标签。

<template>
  <video ref="videoPlayer" class="video-js vjs-default-skin"></video>
</template>

4. 在组件的mounted钩子中初始化video.js播放器并设置源。

export default {
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
      console.log('Player is ready');
    });
  },
  beforeUnmount() {
    if (this.player) {
      this.player.dispose();
    }
  },
  data() {
    return {
      player: null,
      options: {
        autoplay: true,
        controls: true,
        sources: [
          {
            src: 'http://example.com/path/to/video.m3u8', // HLS
            type: 'application/x-mpegURL'
          },
          {
            src: 'http://example.com/path/to/video.flv', // FLV
            type: 'video/flv'
          },
          {
            src: 'rtmp://example.com/rtmp/stream', // RTMP
            type: 'rtmp/mp4'
          },
          {
            src: 'rtsp://example.com/path/to/stream', // RTSP
            type: 'rtsp/avp'
          }
        ]
      }
    };
  }
};

5. 你可以通过videojs的API来控制视频播放，比如播放、暂停、调整音量等。
6. 最后，你可以将这个封装成一个npm包，并发布出去。首先，你需要创建一个入口文件，比如video-player.js，然后在package.json中指定入口文件。

{
  "name": "video-player",
  "version": "1.0.0",
  "main": "video-player.js",
  "dependencies": {
    "video.js": "^7.10.2",
    "videojs-contrib-hls": "^5.15.0"
  }
}

然后你可以使用npm命令来发布你的包了。

注意：以上代码只是示例，具体实现时需要根据实际情况调整，比如视频流的地址和类型。此外，对于在Vue3中使用video.js，你可能还需要考虑Composition API的使用以及Vue3生命周期钩子的变化。