vue + video.js 加载多种视频流（HLS、FLV、RTMP、RTSP）

在Vue中使用video.js来加载不同类型的视频流，可以通过动态切换视频源来实现。以下是一个简单的示例：

1. 安装video.js插件：

npm install video.js

2. 在Vue组件中引入video.js和相关技术（如videojs-flash用于支持FLV）：

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

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

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

4. 在组件的mounted生命周期钩子中初始化video.js播放器，并监听事件：

export default {
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.videoOptions);
 
    // 监听错误事件，以便切换视频源
    this.player.on('error', () => {
      this.switchVideoSource();
    });
  },
  methods: {
    switchVideoSource() {
      // 这里添加逻辑以选择下一个有效的视频源
      // 例如，更新this.videoOptions中的`src`属性
    }
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
}

5. 定义视频选项，包括视频流的类型和源：

export default {
  data() {
    return {
      player: null,
      videoOptions: {
        autoplay: true,
        controls: true,
        sources: [
          {
            src: 'http://example.com/hls/playlist.m3u8', // HLS流
            type: 'application/x-mpegURL'
          },
          {
            src: 'http://example.com/flv/stream.flv', // FLV流
            type: 'video/flv'
          },
          // 可以添加更多源
        ]
      }
    };
  }
  // ...其他生命周期钩子和方法
}

6. 如果需要，可以添加更多的视频流类型，并在播放器错误时，通过switchVideoSource方法来尝试加载下一个源。

注意：FLV流在一些浏览器上可能需要videojs-flash插件，而HLS和RTMP通常可以直接通过video.js支持。确保服务器支持所需的视频流类型，并且跨域策略（CORS）已正确配置以允许播放。