Vue.js中使用Video.js播放直播流失败，报错MEDIA_ERR_SRC_NOT_SUPPORTED

核心问题是Video.js默认不包含HLS流的解码支持，同时需排查浏览器限制和跨域问题，具体解决步骤如下：

1. 安装HLS流支持插件 #

Video.js依赖@videojs/http-streaming（基于HLS.js）处理HLS直播流，执行安装命令：

npm install @videojs/http-streaming --save

2. 修改代码引入插件并调整配置 #

更新你的Vue组件代码，添加插件导入并优化播放配置：

<template>
  <video ref="videoPlayer" id="videoPlayer" class="video-js vjs-big-play-centered"></video>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
// 导入HLS流支持插件
import '@videojs/http-streaming';

const videoPlayer = ref(null);
let player = null;

onMounted(() => {
  player = videojs(videoPlayer.value, {
    controls: true,
    // 浏览器严格限制自动播放，改用静音自动播放（或移除autoplay让用户手动触发）
    autoplay: 'muted',
    muted: true,
    sources: [
      {
        src: 'http://82.212.74.2:8000/live/7407',
        // 兼容两种HLS MIME类型，提升浏览器适配性
        type: 'application/x-mpegURL',
      },
    ],
  });
});

// 组件销毁时清理播放器，避免内存泄漏
onBeforeUnmount(() => {
  if (player) {
    player.dispose();
  }
});
</script>

3. 排查跨域与混合内容问题 #

• 混合内容限制：如果你的Vue应用使用https协议，而直播流是http协议，浏览器会阻止加载非安全资源。解决方式：将直播流切换为https，或在本地开发时，通过浏览器地址栏的锁图标进入网站设置，允许加载"不安全内容"。
• CORS配置：直播流服务器需配置跨域响应头，允许前端域名请求资源。服务器需添加类似以下HTTP头：

  Access-Control-Allow-Origin: *
  Access-Control-Allow-Methods: GET, OPTIONS
  Access-Control-Allow-Headers: Content-Type
  

4. 验证MIME类型兼容性 #

若问题仍存在，可尝试将type改为application/vnd.apple.mpegurl（苹果标准HLS MIME类型），部分浏览器对该类型的兼容性更好。

5. 测试手动播放 #

若自动播放失效，直接移除autoplay配置，让用户手动点击播放按钮——当前浏览器的自动播放策略要求必须有用户交互才能播放带声音的媒体。

内容的提问来源于stack exchange，提问作者omar ba44