浏览器播放多个视频流

某天接到了一个任务，播放一个视频流。后端大哥发给我一个rtmp流，然后，踩坑之旅就开始了。

“这很简单嘛，百度上都是使用vue-video-play插件，设置一下source就行了”。这个先入为主的观点，害得我花了整完去解决各种各样的问题。approach哭辽

解决：

然后发现是视频流格式不对，叫后端大哥返回APPhls就可了。
rtmp格式，需要浏览器有flash插件。而大部分浏览器chrome官方下载已经不支持安装插件，包括我想从chrome里设置后端开发是干什么的再使用依旧没成功。
对比一下其他后端开发几种视频流格式：
rtsp: 需要浏览器安装插件
flv后端开发工程师:不支持ios系统。不支持ie浏览器。首屏快，延时低、支持传输加密、支持浏览器无控件化播放。
hls:缺点是有延时，初次加载很慢。优点是系统兼容性较好、支持传输加密、支持浏览器无控件化appointment播放。

代码：

可做测试的hls流:
devstreaming.cdn.applios下载e.com/vide测试抑郁症的20道题os/stre…

1后端开发工程师 导入组件

npminstallvue-video-player--save

2 引用组件

import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
Vue.use(VueVideoPlayer)

3 应用组件

记得type不要填

import { videoPlayer } from 'vue-video-player'

<videoPlayer
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions">
 </videoPlayer>
 <script>
 export default {
   data() {
    return {
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: true, // 如果true,浏览器准备好时开始回放。
        controls: true, // 控制条
        preload: 'auto', // 视频预加载
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: '',
            src: "http://39.156.9.146:83/openUrl/O1uVeGA/live.m3u8",
          },
        ],
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
      },
    }
  },
 }
 <script>

4 格式调整

修改播放按钮格式

::v-deep .vjs-custom-skin > .video-js .vjs-big-play-button {
  background-color: rgba(0, 0, 0, 0.45);
  font-size: 3.5em;
  border-radius: 50%;
  height: 2em !important;
  line-height: 2em !important;
  width: 2em !important;
  margin-left: 150px !important;
  margin-top: 90px !important;
  outline: none;
}

5 实现打开界面就自动播放

<videoPlayer
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"
        @play="onPlayerPlay($event)">
 </videoPlayer>

 created() {
    this.onPlayerPlay(this.$refs.videoPlayer.player)
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.play
    }
  },
   methods: {
    onPlayerPlay() {
      const myPlayer = this.$refs.videoPlayer.player
      myPlayer.play()
    },
   }

6 实现多个视频播放

  data() {
    return {
      playerOptions: [],
    }
  },

给options赋值

      for (let i = 0; i < this.hlsList.length; i++) {
        let option = {
          playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
          autoplay: true, // 如果true,浏览器准备好时开始回放。
          controls: true, // 控制条
          preload: 'auto', // 视频预加载
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [
            {
              type: '',
              src: this.hlsList[i],
            },
          ],
          notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        }
        this.playerOptions.push(option)
      }

展示

 <el-row class="videoList">
      <el-col class="video1">
      <videoPlayer
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions[0]"
        @play="onPlayerPlay($event)"
      ></videoPlayer></el-col>
      <el-col class="video2">
      <videoPlayer
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions[1]"
        @play="onPlayerPlay($event)"
      ></videoPlayer></el-col>
    </el-row>