vue2.x 播放rtmp,hls,m3u8直播流教程，亲测可用

网上教程挺多，但实际用起来会各种报错
大部分原因是依赖的包的版本问题，因此我这里附上亲测可用的版本;
跟着步骤一步一来就行了！

step1:
在package.json文件下添加所有关于直播的依赖包，然后删除node_modules，在执行npm install

  "dependencies": {
 	...
    "vue": "^2.5.2",
    
    "video.js": "^5.19.1 || ^6.2.0",
    "videojs-contrib-media-sources": "4.7.2",
    "videojs-contrib-hls": "5.14.1",
    "videojs-flash": "^2.2.1",
    "videojs-mux": "^3.1.4",
    "mux.js": "^5.8.0",
    "vue-video-player": "^4.0.2",
    ...
  },

step2:
在main.js中添加如下代码：

import VideoPlayer from "vue-video-player";
require("video.js/dist/video-js.css");
import 'video.js'
import 'videojs-flash'
import hls from "videojs-contrib-hls";
Vue.use(hls)
Vue.use(VideoPlayer)

step3:
在实际需要用到播放器的Vue组件中添加如下代码

<template>
...
       <section class="video-box" >
	        <video-player
	          ref="videoPlayer"
	          :options="videoOptions"
	          class="vjs-custom-skin videoPlayer"
	          :playsinline="true"
	        />
      </section>
...
</template>
<script>
export default {
  data() {
    return {
          videoOptions: {
	        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
	        autoplay: true, //如果true,浏览器准备好时自动播放
	        muted: false, // 默认情况下将会消除任何音频。
	        loop: false, // 导致视频一结束就重新开始。
	        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
	        language: "zh-CN",
	        aspectRatio: "16:16", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
	        techOrder: ["html5", "flash"], // 兼容顺序
	        sources: [
	          {
	            // type: "application/x-mpegURL",
	            // src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
	            type: "rtmp/hls",
	            src: "rtmp://58.200.131.2:1935/livetv/cctv1",
	          },
	        ],
	        hls: true,
      },
    };
    }
}
</script>

OK~,完成以上三个步骤就可以播放直播啦！