网页视频播放，无法播放

Question

可有偿！我两个服务器，一个主站，一个视频转码切片m3u8，当我把转码完的m3u8地址放在主站播放器的时候，电脑网页端一直加载不出。
但是，手机端就能秒开秒播放。无论任何播放器，电脑端网页无法播放，手机端就能播放。
系统，苹果cms系统

尝试过寻找问题，我以为是我转码问题，尝试过腾讯云，阿里云点播转码HLS流的m3u8放在我的主站，同样还是网页无法播放，手机端能播。

希望给出解决办法，如何才能网页播放？什么原因？

Answer 1

该回答结合ChatGPT4o及杨同学*共同作答, 如有帮助，还请采纳。
根据你的描述，视频在手机端能够播放，但在电脑网页端无法播放的问题可能与以下因素有关：

1. CORS (跨域资源共享) 问题

如果你的视频服务器和主站服务器在不同的域名下运行，浏览器可能会因为跨域问题而阻止视频的加载。你可以在视频服务器上配置 CORS 以允许主站访问视频资源。

配置 CORS 头

确保视频服务器的响应头包含以下内容：

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

如果你使用的是 Nginx 作为视频服务器的反向代理，可以在 Nginx 配置文件中添加以下配置：

location / {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Content-Type';
}

2. 视频格式和编码

虽然手机端可以播放视频，电脑端可能不支持某些特定的编码格式。确保转码生成的 HLS 流（m3u8）在所有平台上都兼容。

3. 浏览器兼容性

不同的浏览器对 HLS 流的支持不同。虽然大多数现代浏览器支持 HLS，但你可以尝试使用 HLS.js 库来确保 HLS 流在所有浏览器上都可以播放。

使用 HLS.js

在你的 HTML 文件中引用 HLS.js：

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

然后在你的播放器代码中添加以下逻辑：

if (Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('your-video-url.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function() {
        video.play();
    });
}

4. 浏览器缓存和代理

有时，浏览器的缓存或代理服务器可能会导致问题。尝试清除浏览器缓存，或在无痕模式下打开网页。如果公司网络使用代理服务器，也需要检查代理服务器的配置。

5. HTTPS 和混合内容

如果主站使用 HTTPS，而视频服务器使用 HTTP，浏览器可能会阻止加载不安全的内容。确保两个服务器都使用 HTTPS。

6. 网络防火墙和安全设置

检查网络防火墙和安全设置，确保没有阻止视频服务器的访问。

总结

为了解决你的问题，可以按照以下步骤进行排查和修复：

1. 检查 CORS 设置：确保视频服务器允许主站跨域访问。
2. 确保编码兼容性：确认视频编码格式在所有平台上都兼容。
3. 使用 HLS.js：确保 HLS 流在所有浏览器上都可以播放。
4. 清除缓存和代理设置：排除浏览器缓存和代理服务器的影响。
5. 确保一致的协议：两个服务器都使用 HTTPS。
6. 检查防火墙和安全设置：确保网络防火墙没有阻止视频服务器的访问。

希望这些步骤能帮助你解决视频在电脑端网页无法播放的问题。如果问题仍然存在，可以进一步提供更多的日志信息或错误信息，以便更详细地诊断问题。