【发布时间】：2019-05-16 23:06:43
【问题描述】：
我在投射自托管 JW 播放器视频时遇到问题。以下是 Javascript API 中用于配置播放器的相关参考。
https://developer.jwplayer.com/jw-player/docs/developer-guide/customization/configuration-reference/#casting
以下是有关我的设置的一些详细信息：
1) 视频采用 HLS 流格式。因此，我传递给 JW Player Javascript API 的文件具有 .m3u8 扩展名。
2) 视频托管在 S3 上。
3) 视频通过 CloudFront 提供。
这是我用来在 JW Player 中加载视频的代码：
<div id="jwplayer"></div>
var playerInstance = jwplayer('jwplayer');
playerInstance.setup({
file: <cloudfront-path-to-m3u8-file>,
androidhls: true,
cast: {},
});
当我使用 JW Player Javascript 库的 7.12.13 版本时，我观察到以下情况：
1) 视频可以在浏览器中正常加载。
2) 当我尝试投射它时，我在浏览器的视频中看到一个微调器，表明它即将开始通过 Chromecast 播放。
3) Chromecast 看起来即将开始在电视上播放视频。我看到带有微调器的 Chromecast 符号，然后是视频时间线栏。
4) 在几秒钟内，我看到了 Chromecast 主屏幕。该视频永远不会在电视上播放。
5) 此时，视频开始在浏览器中播放。
6) 我在浏览器调试控制台中看到以下错误消息：
provider.cast.js:1 Error: {code: "session_error", description:
"LOAD_FAILED", details: {…}}code: "session_error"description:
"LOAD_FAILED"details: {type: "LOAD_FAILED"}__proto__: Object
d.error @ provider.cast.js:1
(anonymous) @ cast_sender.js:70
U.onMessage @ cast_sender.js:76
M.i @ cast_sender.js:56
当我使用 8.6.3 版的 JW Player Javascript 库时，我观察到以下情况：
1) 视频可以在浏览器中正常加载。
2) 当我尝试投射它时，我在浏览器的视频中看到一个微调器，表明它即将开始通过 Chromecast 播放。
3) Chromecast 看起来即将开始在电视上播放视频。我看到带有微调器的 Chromecast 符号，然后是视频时间线栏。
4) 几秒钟后，我只在电视上看到 Chromecast 符号。
5) 浏览器视频播放器中的微调器无限旋转。
6) 我在浏览器调试控制台中看到以下错误消息：
provider.cast.js:10 Uncaught TypeError: Cannot read property 'trigger' of undefined
at c.<anonymous> (provider.cast.js:10)
at s (application-0a118d5fa8c4bb8de5f5da2cc04ef8c3a0cc5bf84da710890d3a90e9c79a04ee.js:3)
at c.a [as trigger] (application-0a118d5fa8c4bb8de5f5da2cc04ef8c3a0cc5bf84da710890d3a90e9c79a04ee.js:3)
at t.error (provider.cast.js:10)
at cast_sender.js:70
at U.onMessage (cast_sender.js:76)
at M.i (cast_sender.js:56)
(anonymous) @ provider.cast.js:10
s @ application-0a118d5fa8c4bb8de5f5da2cc04ef8c3a0cc5bf84da710890d3a90e9c79a04ee.js:3
a @ application-0a118d5fa8c4bb8de5f5da2cc04ef8c3a0cc5bf84da710890d3a90e9c79a04ee.js:3
t.error @ provider.cast.js:10
(anonymous) @ cast_sender.js:70
U.onMessage @ cast_sender.js:76
M.i @ cast_sender.js:56
对这些错误的含义或如何调试此问题有任何想法吗？
请注意，我在 Ubuntu 14.04 上的 Chrome（版本 71.0.3578.98 64 位）中运行了上述测试。我还尝试从 Android 设备投射这些页面，但得到了相同的结果。
我尝试过的一些事情：
- 在 S3 存储桶中配置 CORS 以允许从这些域进行访问。
- 将 crossdomain.xml 添加到 S3 存储桶以允许从这些域进行访问。
- 使 CloudFront 边缘中的缓存对象无效。
- 正在清除浏览器缓存。
在尝试隔离问题时，我还尝试了以下方法：
- 用 webm 文件替换 m3u8 文件。我可以使用此设置成功投射。
- 将 m3u8 文件替换为 mp4 文件。我可以使用此设置成功投射。
- 将 CloudFront 路径替换为直接 S3 路径。我观察到与上述相同的问题行为（即，无法投射并在控制台中看到错误）。
我发现更改 S3 存储桶的 CORS 配置以允许从所有来源访问可以解决问题：
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<ExposeHeader>ETag</ExposeHeader>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
但是，这肯定不是理想的，因为它会打开存储桶以从任何域访问。我试图通过为我用来服务视频播放器的域明确指定 CORSRule 块来限制访问。我还尝试将http://*.jwpcdn.com 和https://*.jwpcdn.com 添加为允许的来源，因为我相信这是托管JWPlayer 的Chromecast 接收器的地方。
https://support.jwplayer.com/articles/cross-domain-file-loading-reference
这些组合都不起作用。我能让 JW Player 成功投射 HLS 视频的唯一方法是允许从所有来源访问。
知道如何配置 CORS 以在不牺牲存储桶隐私的情况下获得所需的行为。
谢谢！
【问题讨论】：
标签： amazon-s3 jwplayer chromecast http-live-streaming m3u8