template

<div class="app-container">
    <el-container>
      <el-aside style="background-color: rgb(238, 241, 246)">
        <ul class="list">
          <li v-for="(video, index) in videos" :key="video.videoId" :class="['list-item', {'is-active': isActive == index}]" @click="handlePlay(index)">
            {{ video.videoName }}
          </li>
        </ul>
      </el-aside>
      <el-main>
        <video
          ref="video"
          id="hls-video"
          class="video-js vjs-default-skin"
          autoplay
          controls
          preload="auto"
          style="width: 100%"
        >
          <source :src="cctvApi" type="application/x-mpegURL" />
        </video>
      </el-main>
    </el-container>
  </div>

script

import { queryVideoList } from "@/api/cctv";
import Hls from "hls.js";
import videojs from "video.js";
import "video.js/dist/video-js.css"; // videojs的样式
import "videojs-contrib-hls"; // 引入才能播放m3u8文件
import cctvApi from "@/utils/cctv-env.js";

export default {
  data() {
    return {
      videos: [],
      player: null,
      hls: null,
      isActive: 0,
      cctvApi,
      iviList: {
        0: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8", // CCTV-1高清
        1: "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8", // CCTV-3高清
        2: "http://ivi.bupt.edu.cn/hls/cctv5hd.m3u8", // CCTV-5高清
        3: "http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8", // CCTV-5+高清
        4: "http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8", // CCTV-6高清
        5: "http://ivi.bupt.edu.cn/hls/cctv8hd.m3u8", // CCTV-8高清
      },
    };
  },
  created() {
    const orgId = this.$route.query.orgId;
    this.getVideoList(orgId);
  },
  mounted() {
    // http://www.likecs.com/show-54854.html
    videojs.addLanguage("zh-CN", {
      "You aborted the media playback": "视频播放被终止",
      "A network error caused the media download to fail part-way.":
        "网络错误导致视频下载中途失败。",
      "The media could not be loaded, either because the server or network failed or because the format is not supported.":
        "视频因格式不支持或者服务器或网络的问题无法加载。",
      "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":
        "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
      "No compatible source was found for this media.":
        "无法找到此视频兼容的源。",
    });
    this.getVideo();
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
      this.player = null;
    }
    if (this.hlsjs) {
      this.$refs.video.pause();
      this.hlsjs.destroy();
      this.hlsjs = null;
    }
  },
  methods: {
    async getVideoList(orgId) {
      const res = await queryVideoList(orgId);
      this.videos = res;
    },
    handlePlay(i) {
      this.isActive = i;
      this.getVideo()
    },
    showVideo() {
      const scope = this;
      const video = scope.$refs.video;
      const playPromise = video.play();
      if (playPromise !== undefined) {
        playPromise
          .then((_) => {
            video.pause();
            scope.checkVideo(src, "hls-video");
          })
          .catch((error) => {});
      }
    },
    getVideo() {
      const scope = this;
      // const url = scope.iviList[i]
      const url = scope.cctvApi;
      // const url = "http://ivi.bupt.edu.cn/hls/cctv8hd.m3u8";
      const video = scope.$refs.video;
      // console.log(video.canPlayType("application/vnd.apple.mpegurl")) 
      // console.log(Hls.isSupported())
      if (video.canPlayType("application/vnd.apple.mpegurl")) {
          // 原生支持
          video.src = url;
          video.addEventListener("loadedmetadata", function() {
              try {
                scope.showVideo()
              } catch (error) {
                  console.log(error);
              }
          });
      } else if (Hls.isSupported()){
          scope.hls = new Hls();
          scope.hls.attachMedia(video);
          scope.hls.loadSource(url);
          scope.hls.on(Hls.Events.MANIFEST_PARSED, function() {
            try {
              scope.showVideo();
            } catch (error) {
              console.log(error);
            }
          });
          scope.hls.on(Hls.Events.ERROR, (event, data) => {
            if (data.fatal) {
              switch(data.type) {
                // 网络错误导致的错误，据观察这种类型的错，占比最高
                case Hls.ErrorTypes.NETWORK_ERROR:
                  // 根据自己业务（心跳/错误次数 需要加载还是重新请求，这里只给出简单的，加载情况作为示例）
                  scope.hls.startLoad();
                  break;
                case Hls.ErrorTypes.MEDIA_ERROR:
                  // 多媒体错误
                  scope.hls.recoverMediaError();
                  break;
                default:
                  scope.hls.destroy();
                  scope.$nextTick(() => {
                  // 非网络或多媒体错误，重新获取url
                  scope.getVideo();
                })
                break;
              }
            }
            console.log(event, data);
            // 监听出错事件
            console.log('加载失败');
          });
      }
    },
    checkVideo(src, idname) {
      this.player.src([
        {
          type: "application/x-mpegURL",
          src,
        },
      ]);
      this.player.play();
    },
  
    
  },

};

我用vlc可以播放，但是我用video播放m3u8一直报错