Question

投放自托管的JW Player视频时遇到问题。这是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

当我使用JW Player Javascript库的8.6.3版本时，这是我观察到的：

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边缘中的缓存对象无效。
清除浏览器缓存。

在试图找出问题时，我还尝试了以下方法：

将m3u8文件替换为webm文件。我可以使用此设置成功投射。
用mp4文件替换m3u8文件。我可以使用此设置成功投射。
用直接S3路径替换CloudFront路径。我观察到了与上述相同的问题行为（即无法投射并查看控制台中的错误）。

我发现更改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即可获得所需的行为而又不牺牲存储桶的隐私性。

谢谢！

Answer 1

事实证明，我还需要允许从https：//*.gstatic.com访问。这是http：//*.jwpcdn.com和托管视频播放器的域的补充。现在，我可以从JW Player 7和8版本成功投射HLS视频了！

这些更改之后，这是我的S3存储桶的CORS配置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>http://my-domain-with-video-player.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>http://*.jwpcdn.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>https://*.gstatic.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

JW Player中用于S3托管的HLS视频的CORS配置

1 个答案: