uni-app renderjs 访问h5（https）时无法播放http协议的视频

在uni-app中，由于安全策略和浏览器同源策略的限制，当你在使用HTTPS协议访问H5页面时，通常无法直接播放HTTP协议的视频。这是因为现代浏览器为了防止中间人攻击（MITM），禁止了从安全上下文（HTTPS）加载非安全资源（HTTP）的行为。

为了解决这个问题，你有几种可能的方案，但请注意，这些方案可能需要根据你的具体需求和环境进行调整。以下是一些可能的解决方案及其相关代码示例：

方案一：使用HTTPS视频源

最直接的方法是确保你的视频资源也通过HTTPS协议提供。这样，你就可以避免跨协议请求的问题。

<!-- 假设你的视频已经通过HTTPS提供 -->
<video src="https://your-secure-video-url.com/video.mp4" controls></video>

方案二：使用反向代理

如果你无法控制视频源的协议，但你可以控制服务器，你可以在服务器上设置一个反向代理，将HTTP请求重定向到HTTPS视频源（如果视频服务器支持HTTPS）。

在服务器上（例如使用Node.js Express）：

const express = require('express');
const request = require('request');
const app = express();

app.get('/proxy-video', (req, res) => {
  const videoUrl = 'http://your-insecure-video-url.com/video.mp4';
  request(videoUrl).pipe(res);
});

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

然后在uni-app中：

<video src="https://your-server.com/proxy-video" controls></video>

方案三：使用CORS和iframe（不推荐，有安全风险）

如果视频服务器允许跨源资源共享（CORS），并且你接受潜在的安全风险，你可以尝试将视频嵌入到一个iframe中，但这种方法不推荐，因为它可能引入新的安全问题。

<!-- 在你的HTML中 -->
<iframe src="http://your-insecure-video-page.com" width="600" height="400"></iframe>

注意：这种方法不仅可能受到浏览器安全策略的限制，而且如果视频页面包含额外的JavaScript或广告，它可能会干扰你的应用体验。

总结

推荐的做法是确保所有资源都通过HTTPS提供，或者在你的服务器上设置反向代理来确保所有请求都是安全的。这不仅可以解决跨协议请求的问题，还可以提高你的应用安全性。