This topic describes how to configure cross-origin resource sharing (CORS) for playbacks that are performed by using the HTML5 player, Flash player, and Object Storage Service (OSS).
Configure CORS for using the HTML5 player to play FLV and M3U8 videos
If the following error message is returned, you must enable CORS for the domain name for playback to resolve this issue.
No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Origin ‘http://localhost:9030‘ is therefore not allowed access.Add HTTP headers to enable CORS. For more information, see Configure a custom HTTP response header.
Access-Control-Allow-Origin: specifies the domain name from which cross-origin requests are allowed. Set the value of the HTTP header to the domain name of the website on which videos are played. For example, if videos are played on the https://www.aliyundoc.com website, set the value to https://www.aliyundoc.com. The following figure shows how to configure the Access-Control-Allow-Origin header.
Access-Control-Allow-Methods: specifies the allowed methods of the cross-origin requests. Valid values: POST and GET. You can specify both POST and GET methods and separate them with a comma (,). The following figure shows how to configure the Access-Control-Allow-Methods header.
If the URL of a .ts part and the URL of the M3U8 video belong to different domain names, you need to configure the preceding HTTP headers for the domain name of the .ts part.
Configure CORS for the Flash player
If the error message in the following figure is returned, check whether an Internet content provider (ICP) filing is obtained and whether a CNAME is mapped to the domain name. For more information, see Domain name requirements and Add a CNAME record in Alibaba Cloud DNS.
If the domain name has an ICP filing and is mapped to a CNAME, you must configure CORS. You can configure CORS by adding a cross-origin policy file named crossdomain.xml for the player.
Add the file to the root directory of the domain name to which the video URL belongs. If the video to be played is stored in an OSS bucket, add the file to the root directory of the OSS bucket.
If you have activated ApsaraVideo VOD, ApsaraVideo VOD automatically adds the crossdomain.xml file after you activate the service. Then, you can call the SetCrossdomainContent operation to update the content of the crossdomain.xml file.
The following code provides an example on the content of the crossdomain.xml file:
<?xml version="1.0" encoding="UTF-8"?>
<cross-domain-policy>
<allow-access-from domain="*"/>
<allow-http-request-headers-from domain="*" headers="*" secure="false"/>
</cross-domain-policy>If the URL of the thumbnail and the URL of the video belongs to different domain names, you need to add the crossdomain.xml file for the domain name of the thumbnail.
Configure CORS for playing videos that are stored in OSS
If you want the player to access the OSS bucket where videos are stored, you need to configure CORS for the OSS bucket. For more information, see Configure CORS rules.
Set the following parameters to create a CORS rule:
Sources: Set the parameter to an asterisk (*).
Allow Methods: Valid values: GET, POST, PUT, DELETE, and HEAD.
Allowed Headers: Set the parameter to an asterisk (*).
Exposed Headers: Set the parameter to ETag.
Specify this rule as the first of all CORS rules.
The following figure shows how to set the parameters to create a CORS rule.