hls流视频，m3u8格式播放

要想使用videojs我们势必是需要安装videojs的, 而且在生产环境中我们也需要依赖它, 所以如下

安装对应的插件依赖

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

yarn add video.js -S
yarn add videojs-flash videojs-contrib-hls -S

我们打开Vue工程中的主入口main.js进行引入
// 引入videojs，以下引入了rtmp与hls流的视频

import Video from 'video.js';
import 'video.js/dist/video-js.css';
import 'videojs-flash';//插件
import hls from 'videojs-contrib-hls';
Vue.prototype.$video = Video;
Vue.use(hls);

实例：

<video id="video" class="video-js vjs-default-skin vjs-big-play-centered" ></video>

//methods中定义一个方法
loadVideo(name) {
      //这个m3u8链接我也是网上废了好大劲找到的
      const srcUrl='https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8';
      const currentInstance = this.$video(document.getElementById(name), {
        autoplay: true, // 是否自动播放
        controls: true, // 是否显示控件
        muted: true,//静音，才能开启自动播放
        loop:true
      });
      if (/\.m3u8$/.test(srcUrl)) {
        currentInstance.src({
          src:srcUrl,
          type: "application/x-mpegURL" // 告诉videojs这是一个hls流类型的视频
        });
      } else if (/\.mp4$/.test(srcUrl)) {
        currentInstance.src({
          src:srcUrl,
          type: "video/mp4" // 告诉videojs这是一个mp4流类型的视频
        });
      } else if(/\.flv$/.test(srcUrl)){
        currentInstance.src({
          src: "srcUrl",
          type: "rtmp/flv"
        });
      }
    }



//多组视频渲染代码

//html
  <video :id="'rtmpVideo'+inx" class="video-js shzy_vio">
        <source :src='item.url' type="application/x-mpegURL" />
      </video>
//js
let elementList = document.querySelectorAll(".video-js");
      this.element = elementList.length; //videojs 数量赋值
      for (let index = 0; index < elementList.length; index++) {
        let id = elementList[index].getAttribute("id");
        this.$video(
          id,
          {
            autoplay: true, //自动播放
            muted: true, // 是否静音,
            controls: false, //控制条
            techOrder: ["html5", "flash"], //设置flash播放
            language: "en", // 初始化语言
            preload: "auto" // 预加载
          },
          function() {
            this.one("playing", function() {
              // 监听播放
              console.log("成功");
            });
            this.one("error", function(error) {
              // 监听错误
              console.error("监听到异常，错误信息---", error);
            });
          }
        );
      }

控制条调整：只保留全屏、音量、进度、画中画

            controlBar: {
              // 自定义按钮的位置
              children: [
                {
                  name: "playToggle"
                },
                {
                  name: "progressControl"
                },
                {
                  name: "currentTimeDisplay"
                },
                {
                  name: "timeDivider" //时间进度条
                },
                {
                  name: "durationDisplay"
                },
                {
                  name: "volumePanel", // 音量调整方式横线条变为竖线条
                  inline: false
                },
                {
                  name: "pictureInPictureToggle" //画中画播放模式
                },
                {
                  name: "fullscreenToggle"
                }
              ]
            }

在mounted中调用loadVideo(“video”)，就可播放了

目前发现video必须开启muted：true，否则视频不自动播放；说是浏览器的问题，需求上需要开启静音播放，没再研究，有懂的小伙伴留言啊，求教！！！

更新：231214：接到一个音频播放报警功能，默认浏览器是禁止播放的，但是可以给电脑配置允许自动播放的网址；具体配置路径：设置–隐私和安全–网站设置–更多内容设置–声音–允许播放声音（添加网址ip或者域名）。