m3u8 视频无法在浏览器中加载，MIME 类型文本/html 的 CORB 错误答案

【问题标题】：m3u8 video won't load in browser, CORB error with MIME type text/htmlm3u8 视频无法在浏览器中加载，MIME 类型文本/html 的 CORB 错误
【发布时间】：2022-12-01 00:50:01
【问题描述】：

我想在 Angular Web 应用程序中打开 m3u8 视频（最好还有其他视频类型）。（或离子角度）。

我尝试了这样的 html 视频元素（也尝试了一些其他类型或它们的组合）


```
<video [poster]="video.thumbnail" controls preload="none" playsinline>
    <source [src]="video.url" type="application/x-mpegURL">
    <source [src]="video.url" type="application/vnd.apple.mpegurl">
</video>
```

这给了我这个错误（实际上它看起来像一个警告，但它是唯一的错误）在 chrome 中甚至看起来都不喜欢它甚至试图加载视频：

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://*my video url* with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

然后我尝试使用video.js。我的组件：

declare var videojs: any;
...
videoJSplayer = videojs(document.getElementById(id));

并将这些添加到 index.html：

<link href="//vjs.zencdn.net/7.0/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.0/video.min.js"></script>

它得到修复并且在所有桌面浏览器（和 chrome 移动模拟）和 iphone（safari），甚至是 android Firefox 中工作正常，但仍然给我同样的错误安卓铬这次陷入了无限加载循环。

我也按照其他问题中的建议尝试了 iframe，但它没有用，因为我无权访问源代码并且“X-Frame-Options”是“sameorigin”。

好像我需要一种方法让它明白这不是文本而是视频。如果有人可以就我做错了什么提出一些想法，或者提出另一种解决方法，我将不胜感激。我的@angular/cli 版本是14.2.6（和 Ionic 6）

【问题讨论】：

标签： android angular google-chrome video.js m3u8

【解决方案1】：

您的两个 URL 片段引用“vjs.zencdn.net/7.0/”。我怀疑这是在获取生产级代码。

对于 video.js，我被教导在这里查看发布文档： https://github.com/videojs/video.js/releases

注意许多不包含的版本发布号后带圆圈的“最新”字样，但是相反，要么什么都不显示，要么被圈出“预发布”。

因此，根据该信息，尝试获取 '...vjs.zencdn.net/7.20.3/...' 因为它是标有“最新”的最新版本

【讨论】：