m3u8无法播放http前缀的地址

Question

前端使用video.js播放m3u8后缀的视频流，如果视频流是https开头就能正常播放，http开头就不能播放，这是为什么呢

Answer 1

引自免费微信小程序：皆我百晓生

在现代浏览器中，由于同源策略和安全原因，不允许跨协议（即从HTTP到HTTPS）加载资源。这意味着如果你的网页是通过HTTPS协议加载的，那么它只能加载其他HTTPS资源，而不能加载HTTP资源。这包括M3U8文件和其他媒体内容。

为了解决这个问题，你需要确保所有的资源（包括M3U8文件和分片TS文件）都是通过HTTPS协议提供的。如果服务器端可以配置，建议将所有内容迁移到HTTPS。这样，无论视频流的原始URL是什么，前端都可以正常访问。

如果你无法控制服务器端，但仍然想在HTTPS页面上播放HTTP M3U8视频流，有几种可能的解决方案，但它们都有各自的限制：

1. 代理服务器： 你可以创建一个代理服务器，它接收来自客户端的请求，然后将这些请求转发到HTTP M3U8源。这样，实际的请求看起来是从HTTPS页面发起的，因此符合浏览器的安全策略。

   这需要额外的编程工作，并且可能会带来性能开销。这里是一个简单的Node.js示例，使用了http-proxy-middleware库：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

app.use(
  '/proxy',
  createProxyMiddleware({
    target: 'http://your-http-video-source.com', // 替换为你的HTTP M3U8源地址
    changeOrigin: true,
  })
);

app.listen(3000, () => {
  console.log('Proxy server is running on port 3000');
});

1. CORS 和 JSONP： 如果M3U8服务支持CORS（跨源资源共享），你可以在服务器端设置适当的响应头允许跨域访问。然而，M3U8文件通常是静态文件，很难实现CORS。

   JSONP是一种古老的技术，用于绕过同源策略，但它并不适用于M3U8格式，因为M3U8是文本文件，不适合JSONP的工作方式。

2. HTML5的CORS API： 另一种方法是在JavaScript中使用fetch API获取M3U8文件，处理CORS错误。然后手动解析M3U8并构建MediaSource对象。这种方法相当复杂，涉及到大量手动操作，不推荐。

总的来说，最简单、最推荐的方法是将M3U8视频流迁移至HTTPS。如果你没有权限更改服务器设置，可能需要与服务器管理员联系，或者考虑使用代理服务器来解决这个问题。