From 7298de929864315119d1ec363f7b219301ae1206 Mon Sep 17 00:00:00 2001 From: Jacob Trimble Date: Mon, 11 Sep 2017 13:57:29 -0700 Subject: [PATCH] Add CORS explanations to tutorial. Closes #1018 Change-Id: I0ec915fe37b3cc62aff0184f2306297b388db701 --- docs/tutorials/faq.md | 4 +++- .../tutorials/network-and-buffering-config.md | 24 +++++++++++++++++++ 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/docs/tutorials/faq.md b/docs/tutorials/faq.md index 0feb12fc55..bd7b42dff1 100644 --- a/docs/tutorials/faq.md +++ b/docs/tutorials/faq.md @@ -24,7 +24,9 @@ check `chrome://media-internals` for more info (see [#489(comment)][489]). **A:** The browser rejected the request. Look at the browser logs for more info. This is usually a [CORS][] error, which means you need particular -headers in the response. +headers in the response. Additionally, with some manifests, we will send a +`Range` header. This will require explicit approval through the CORS header +`Access-Control-Allow-Headers`. This can also happen with mixed-content restrictions. If the site is using `https:`, then your manifest and segments must also. diff --git a/docs/tutorials/network-and-buffering-config.md b/docs/tutorials/network-and-buffering-config.md index 584ea2f079..671dd7af8f 100644 --- a/docs/tutorials/network-and-buffering-config.md +++ b/docs/tutorials/network-and-buffering-config.md @@ -87,6 +87,30 @@ of the old bitrate in the buffer. Use the code from {@tutorial basic-usage} and try configuring some of these parameters in `playerInit()` to see how they affect playback. +#### Server Considerations + +Shaka Player makes a number of requests to various servers while streaming. You +need to make sure that Shaka has correct access to those resources. Browsers +impose several restrictions on the content that a webpage has access to. + +One restriction is [CORS][] (Cross-Origin Resource Sharing). This requires +network requests to be made to the same origin, or for the server to explicitly +give access. An "origin" refers to the domain name (e.g. `api.example.com`), +the scheme (e.g. `https:`), and the port (e.g. 80). If you host your assets on +a different origin than your web app, then you'll need to set CORS headers on +the asset server to ensure we have access. For some content, this will also +require allowing the `Range` header by sending the CORS header +`Access-Control-Allow-Headers`. + +Another restriction is called mixed-content. If your webpage is accessed using +`https:`, then all resources that are loaded also need to be loaded using +`https:`. This means that the manifest and all the media segments need to be +loaded using `https:`. This is most easily done by either having all the +URLs in your manifests always use `https:`, or by having it not include the +scheme (e.g. `//example.com/file.mp4`). + +[CORS]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS + #### Continue the Tutorials