Skip to content

Commit

Permalink
Add CORS explanations to tutorial.
Browse files Browse the repository at this point in the history
Closes #1018

Change-Id: I0ec915fe37b3cc62aff0184f2306297b388db701
  • Loading branch information
TheModMaker committed Sep 26, 2017
1 parent d997065 commit c9aca1a
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 1 deletion.
4 changes: 3 additions & 1 deletion docs/tutorials/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
24 changes: 24 additions & 0 deletions docs/tutorials/network-and-buffering-config.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down

0 comments on commit c9aca1a

Please sign in to comment.