How Do I Preview OBS Objects in My Web Browser?

• The bucket policy must be public read, so that all objects in the bucket can be accessed by anonymous users. For details about how to set the bucket policy to public read, see Creating a Bucket Policy with a Template.
• As required by the China's Ministry of Industry and Information Technology (MIIT), you must complete the Internet Content Provider (ICP) filing, if the bucket to which your user-defined domain name is bound is in any of the following regions:

  CN North-Beijing1, CN North-Beijing4, CN East-Shanghai1, CN East-Shanghai2, and CN South-Guangzhou

1. Bind a user-defined domain name to the OBS bucket.

   For details, see Accessing a Bucket Using a User-Defined Domain Name. During the configuration, add a CNAME record set for the OBS bucket domain name.

   Figure 1 Binding a user-defined domain name to the bucket
   

2. Check whether objects can be previewed in a browser online.

   After the configuration is complete, click the object name on the Objects page. On the Basic Information page of the object, click Copy All URLs of User-Defined Domain Name URLs and share the copied URLs with a user. The user then can directly preview the files in a browser using the URLs.

If a file cannot be previewed online after the preceding configuration is complete, perform the following operations:

• Check whether ContentDisposition: attachment is specified in the file metadata. If yes, delete this configuration from the metadata.
• Check whether ContentType in the file metadata correctly matches the actual file format that is natively supported by the browser for preview.
  • If ContentType in the file metadata does not match the file format, modify the object metadata to ensure that the ContentType value is correct.

    For example, ContentType should be set to video/mp4 for an MP4 video or set to image/jpeg for a JPG image. For details about all supported ContentType values, see Object Metadata Content-Type.

  • If the browser does not natively support preview of the file format, you can extend the preview capability in the following ways:
    • Install a browser preview plug-in for the file format.
    • For video files in special formats, use the video transcoding capability of Media Processing Center (MPC) to convert them into a format compatible with the browser.

• The bucket policy must be public read, so that all objects in the bucket can be accessed by anonymous users.
• As required by the China's Ministry of Industry and Information Technology (MIIT), you must complete the Internet Content Provider (ICP) filing, if the bucket to which your user-defined domain name is bound is in any of the following regions:

  CN North-Beijing1, CN North-Beijing4, CN East-Shanghai1, CN East-Shanghai2, and CN South-Guangzhou

• HTTPS requests are supported. To use HTTPS, you need to import a certificate to CDN. For details, see Configuring an HTTPS Certificate.
• In this method, the origin server's domain name is used to access CDN. Generated retrieval traffic will be billed as the outbound Internet traffic and cannot be covered by pull traffic packages offered by OBS.

1. Bind a user-defined domain name to the OBS bucket.

   For details, see Accessing a Bucket Using a User-Defined Domain Name. During the configuration, you need to enable CDN acceleration and use the CNAME record set allocated by CDN.

2. Log in to the CDN console and go to the Domains page. Click the name of the domain name and perform the following operations:
   1. Under Origin Settings > Origin Server Settings, set Type to OBS bucket, Address to the OBS bucket domain name, HTTP Port to 80, and HTTPS Port to 443.
      Figure 2 Origin Server Settings
      
   2. On the Advanced Settings tab, click Edit next to HTTP Headers. Then, add response header Content-Disposition and set its value to inline.
      Figure 3 Advanced Settings
      

3. Check whether objects can be previewed in a browser online.

   After the configuration is complete, click the object name on the Objects page. On the Basic Information page of the object, click Copy All URLs of User-Defined Domain Name URLs and share the copied URLs with a user. The user then can directly preview the files in a browser using the URLs.

If a file cannot be previewed online after the preceding configuration is complete, perform the following operations:

• Clear the local browser cache and try again.
• Purge the cache on the CDN console. For details, see Cache Purge.
• Check whether ContentDisposition: attachment is specified in the file metadata. If yes, delete this configuration from the metadata.
• Check whether ContentType in the file metadata correctly matches the actual file format that is natively supported by the browser for preview.
  • If ContentType in the file metadata does not match the file format, modify the object metadata to ensure that the ContentType value is correct.

    For example, ContentType should be set to video/mp4 for an MP4 video or set to image/jpeg for a JPG image. For details about all supported ContentType values, see Object Metadata Content-Type.

  • If the browser does not natively support preview of the file format, you can extend the preview capability in the following ways:
    • Install a browser preview plug-in for the file format.
    • For video files in special formats, use the video transcoding capability of Media Processing Center (MPC) to convert them into a format compatible with the browser.

• The bucket policy can be public read or private.
• You only need to configure an acceleration domain name on CDN. No user-defined domain name of OBS is required. As required by the China's Ministry of Industry and Information Technology (MIIT), the used acceleration domain name must complete the Internet Content Provider (ICP) filing, if your bucket is in any of the following regions:

  CN North-Beijing1, CN North-Beijing4, CN East-Shanghai1, CN East-Shanghai2, and CN South-Guangzhou

• HTTPS requests are supported. To use HTTPS, you need to import a certificate to CDN. For details, see Configuring an HTTPS Certificate.

1. On the CDN console, add your domain name as an acceleration domain name and set the private OBS bucket as the origin server.

   When adding an acceleration domain name, set key parameters as follows. For details about other parameters, see Adding a Domain Name.

   • Service Type: Select Website, File download, or On-demand services based on your service type.
   • Origin Servers: Click Add Origin Server. Set Type to OBS bucket, and set Address to the OBS bucket domain name. (You can query the domain name in the Domain Name Details area on the bucket overview page.)
   Figure 4 Setting the origin server type
   

2. After adding the domain name, set its custom HTTP response header Content-Disposition to inline.
   Figure 5 Advanced Settings
   
   1. In the domain name list, click the name of the acceleration domain name. The Summary page is displayed.
   2. Click the Advanced Settings tab and click next to HTTP Headers.
   3. In the Configure HTTP Headers window, click Add. Set the header name to Content-Disposition, and its value to inline.
   4. Click OK.

3. Add a CNAME record set on DNS.

   For details, see the CNAME record configuration in Binding a User-Defined Domain Name. The value is the CNAME assigned by CDN (obtained from the CDN domain name list).

   Figure 6 Obtaining the CNAME assigned by CDN
   
   Figure 7 Adding a record set
   

4. Check whether objects can be previewed in a browser online.

   After the configuration is complete, share the link in the format of http://CDN acceleration domain name/Object access path with others for them to preview the object in a browser online.

   • CDN acceleration domain name: acceleration domain name added in 1.
   • Object access path: On the Objects page, click Share in the Operation column of the object. In the displayed dialog box, click the copy icon to copy the link. For details, see Sharing an Object.

   For example, if the acceleration domain name is testexample.com and the object access path is testfolder/test.txt, the link for accessing the object is http://testexample.com/testfolder/test.txt.

If a file cannot be previewed online after the preceding configuration is complete, perform the following operations:

• Clear the local browser cache and try again.
• Purge the cache on the CDN console. For details, see Cache Purge.
• Check whether ContentDisposition: attachment is specified in the file metadata. If yes, delete this configuration from the metadata.
• Check whether ContentType in the file metadata correctly matches the actual file format that is natively supported by the browser for preview.
  • If ContentType in the file metadata does not match the file format, modify the object metadata to ensure that the ContentType value is correct.

    For example, ContentType should be set to video/mp4 for an MP4 video or set to image/jpeg for a JPG image. For details about all supported ContentType values, see Object Metadata Content-Type.

  • If the browser does not natively support preview of the file format, you can extend the preview capability in the following ways:
    • Install a browser preview plug-in for the file format.
    • For video files in special formats, use the video transcoding capability of Media Processing Center (MPC) to convert them into a format compatible with the browser.