JW Player中S3托管的HLS视频的CORS配置 [英] CORS configuration for S3-hosted HLS video in JW Player

问题描述

投放自托管的JW Player视频时遇到问题.这是Javascript API中用于配置播放器的相关参考.
https://developer.jwplayer.com /jw-player/docs/developer-guide/customization/configuration-reference/#casting

I'm having trouble casting a self-hosted JW Player video. Here's the relevant reference in the Javascript API for configuring the player.
https://developer.jwplayer.com/jw-player/docs/developer-guide/customization/configuration-reference/#casting

以下是有关我的设置的一些详细信息:
1)视频为HLS流格式.因此，我要传递给JW Player Javascript API的文件具有.m3u8扩展名.
2)视频托管在S3上.
3)视频是通过CloudFront投放的.

Here are some details about my setup:
1) The video is in HLS streaming format. So the file that I'm passing to the JW Player Javascript API has .m3u8 extension.
2) The video is hosted on S3.
3) The video is served through CloudFront.

这是我用来在JW Player中加载视频的代码:

Here's the code that I use to load the video in 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版时，这是我观察到的内容:

When I use version 7.12.13 of the JW Player Javascript library, here's what I observe:

1)视频在浏览器中加载正常.
2)尝试投射时，我在浏览器的视频中看到一个微调器，表明它即将开始通过Chromecast播放.
3)Chromecast似乎即将开始在电视上播放视频.我看到带有微调器的Chromecast符号，然后是视频时间轴栏.
4)在几秒钟内，我看到了Chromecast主屏幕.该视频永远不会在电视上播放.
5)此时，视频开始在浏览器中播放.
6)我在浏览器调试控制台中看到以下错误消息:

1) The video loads fine in the browser.
2) When I try to cast it, I see a spinner in the video in the browser, indicating that it's about to start playing via Chromecast.
3) The Chromecast looks like it's about to start playing the video on the TV. I see the Chromecast symbol with a spinner, then the video timeline bar.
4) Within a few seoncds, I see the Chromecast home screen. The video never plays on the TV.
5) At this point, the video start playing in the browser.
6) I see the following error message in the browser debug console:

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版时，这是我观察到的:

When I use version 8.6.3 of the JW Player Javascript library, here's what I observe:

1)视频在浏览器中加载正常.
2)尝试投射时，我在浏览器的视频中看到一个微调框，表明它即将开始通过Chromecast播放.
3)Chromecast似乎即将开始在电视上播放视频.我看到带有微调器的Chromecast符号，然后是视频时间轴栏.
4)几秒钟后，我仅在电视上看到Chromecast符号.
5)浏览器中视频播放器中的微调器无限旋转.
6)我在浏览器调试控制台中看到以下错误消息:

1) The video loads fine in the browser.
2) When I try to cast it, I see a spinner in the video in the browser, indicating that it's about to start playing via Chromecast.
3) The Chromecast looks like it's about to start playing the video on the TV. I see the Chromecast symbol with a spinner, then the video timeline bar.
4) After a few seconds, I only see the Chromecast symbol on the TV.
5) The spinner in the video player in the browser spins indefinitely.
6) I see the following error message in the browser debug console:

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

关于这些错误是什么意思或如何调试此问题的任何想法?

Any ideas about what these errors mean or how to go about debugging this issue?

请注意，我在Ubuntu 14.04上的Chrome浏览器(版本71.0.3578.98 64位)中运行了上述测试.我也尝试从Android设备投射这些页面，但是得到了相同的结果.

Note that I ran the above tests in Chrome (version 71.0.3578.98 64-bit) on Ubuntu 14.04. I also tried casting these pages from an Android device, but got the same results.

我尝试过的一些事情:

• 在S3存储桶中配置了CORS，以允许从这些域进行访问.
• 已将crossdomain.xml添加到S3存储桶中，以允许从这些域进行访问.
• 使CloudFront边缘中的缓存对象无效.
• 清除浏览器缓存.

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

In trying to isolate the problem, I also tried the following:

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

我发现更改S3存储桶的CORS配置以允许从所有来源访问都可以解决此问题:

I discovered that changing the CORS configuration for the S3 bucket to allow access from all origins fixes the problem:

<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-文件加载参考

However, this is certainly not ideal because it opens up the bucket to access from any domain. I tried to restrict access by explicitly specifying CORSRule blocks for the domain that I use to serve the video player. I also tried adding http://*.jwpcdn.com and https://*.jwpcdn.com as allowed origins, since I believe that's where JWPlayer's Chromecast receiver is hosted. https://support.jwplayer.com/articles/cross-domain-file-loading-reference

这些组合均无效.我可以让JW Player成功播放HLS视频的唯一方法是允许从所有来源访问.

None of these combinations worked. The only way I could get JW Player to successfully cast the HLS video was to allow access from all origins.

任何想法，我如何配置CORS即可在不牺牲存储桶的隐私性的情况下获得所需的行为.

Any idea how I can configure CORS to get the desired behavior without sacrificing the privacy of the bucket.

谢谢！

推荐答案

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

It turns out I also needed to allow access from https://*.gstatic.com. This is in addition to http://*.jwpcdn.com and the domain on which the video player is being hosted. I can now successfully cast an HLS video from JW Player versions 7 and 8!

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

After these changes, here's what the CORS configuration looks like for my S3 bucket:

<?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配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！