Managing the Preview Image

After you add an asset to Backlot, you can specify the image to display before viewers click the play button. The image can be in the GIF, PNG, or JPG format.

Note: For more information about Backlot REST API commands, see the Backlot API Reference.

To select your desired thumbnail or preview images, you have the following choices:

  • Use one of the auto-generated images. See the discussion Auto-generated Preview Images (Thumbnails).
  • Upload your own custom image. Backlot only supports uploading one preview image. Subsequent uploads simply replace the previous upload.
  • Indicate a URL where the desired image is.

To manage the preview image:

  1. To view the preview images that are automatically generated through transcoding, use GET with the /v2/assets route, the asset ID, and the /generated_preview_images qualifier. The following example returns the preview automatically generated images for asset JxbzdkMjqB:
    [GET]/v2/assets/JxbzdkMjqB/generated_preview_images

    Backlot returns a response similar to the following:

    [  
       {  
          "url":"http://ak.c.ooyala.com/JxbzdkMjqB/Ut_HKthATH4",
          "time":0
       },
       {  
          "url":"http://ak.c.ooyala.com/JxbzdkMjqB/q78XH7vLqJJ",
          "time":4512
       }
    ]
    Note:

    Try out the code samples using your account credentials in the Ooyala Scratchpad. For information about using the Scratchpad, see Practice Making Requests with the Scratchpad. To launch the scratchpad, go to Ooyala API Scratchpad.

  2. To create a custom preview image, you can either upload a file or specify a URL where the image is.
    • Note: A POST request adds the preview image file to the current set of files. A PUT request replaces the current preview image files.

      To upload a custom preview image, use POST, the /v2/assets route, the asset ID, and the image data in the request body.

      The following example adds a preview image to asset Y1dTdvMjq9QtOM:

      [POST]/v2/assets/Y1dTdvMjq9QtOM/preview_image_files
         <file_contents>

      Backlot returns a response similar to the following:

      {
         "width":800,
         "height":600,
         "url":"http://ak.c.ooyala.com/Y1dTdvMjq9QtOM/promo136839624",
         "id":"promo136839624"
      }

      Repeat this step for each size of the image to add.

      Note:

      Try out the code samples using your account credentials in the Ooyala Scratchpad. For information about using the Scratchpad, see Practice Making Requests with the Scratchpad. To launch the scratchpad, go to Ooyala API Scratchpad.

    • To indicate a custom preview image by URL, use PUT, the /v2/assets route, the asset ID, and the size and location details in the request body.

      The following example adds multiple sizes of a preview image to asset Y1dTdvMjq9QtOM:

      [POST]/v2/assets/Y1dTdvMjq9QtOM/preview_image_urls[  
         {  
            "width":1920,
            "height":1080,
            "url":"http://www.mysite.com/my_big_image.png"
         },
         {  
            "width":1280,
            "height":720,
            "url":"http://www.mysite.com/my_medium_image.png"
         },
         {  
            "width":640,
            "height":480,
            "url":"http://www.mysite.com/my_small_image.png"
         }
      ]

      Backlot returns a response similar to the following:

      [
         {  
            "url":"http://www.mysite.com/my_big_image.png",
            "width":1920,
            "height":1080
         },
         {  
            "url":"http://www.mysite.com/my_medium_image.png",
            "width":1280,
            "height":720
         },
         {  
            "url":"http://www.mysite.com/my_small_image.png",
            "width":640,
            "height":480
         }
      ]
      Note:

      Try out the code samples using your account credentials in the Ooyala Scratchpad. For information about using the Scratchpad, see Practice Making Requests with the Scratchpad. To launch the scratchpad, go to Ooyala API Scratchpad.

  3. For the primary preview image an asset, you can use either the generated image or the uploaded/custom one.
    • To choose one of the automatically generated images, in the request body for the type property, specify generated and the time. In the following example, the primary preview image is set to the image that was generated at the 15-second mark.

      [PUT]/v2/assets/Y1dTdvMjq9QtOM/primary_preview_image{  
         "type":"generated",
         "time":15
      }
      Note:

      Try out the code samples using your account credentials in the Ooyala Scratchpad. For information about using the Scratchpad, see Practice Making Requests with the Scratchpad. To launch the scratchpad, go to Ooyala API Scratchpad.

    • To use uploaded files, in the request body for the type property, specify uploaded_file. In the following example, the primary preview image is set to use one of the uploaded images. At the time of embed, Ooyala automatically selects an image closest to the size of the embed.

      [PUT]/v2/assets/Y1dTdvMjq9QtOM/primary_preview_image{  
         "type":"uploaded_file"
      }
      Note:

      Try out the code samples using your account credentials in the Ooyala Scratchpad. For information about using the Scratchpad, see Practice Making Requests with the Scratchpad. To launch the scratchpad, go to Ooyala API Scratchpad.

    • To include information about the primary preview image in a get request, specify include=primary_preview_image. In the following example, the primary preview image is returned in the response.

      [GET]/v2/assets/Y1dTdvMjq9QtOM?include=primary_preview_image
      Note:

      Try out the code samples using your account credentials in the Ooyala Scratchpad. For information about using the Scratchpad, see Practice Making Requests with the Scratchpad. To launch the scratchpad, go to Ooyala API Scratchpad.

    • To use files at remote URLs, in the request body for the type property, specify remote_url. In the following example, the primary preview image is set to use one of the remote URLs. At the time of embed, Ooyala automatically selects an image closest to the size of the embed.

      [PUT]/v2/assets/Y1dTdvMjq9QtOM/primary_preview_image{  
         "type":"remote_url"
      }
      Note:

      For displaying remote-URL type preview images in the Flash-based Ooyala player, be sure to set up the Flash-required cross-domain security file crossdomain.xml to include an entry for the *.ooyala.com domain and any other domains (web sites) that need to access the image. Otherwise, Ooyala player cannot display the remotely hosted image.

      The file is described at Setting a crossdomain.xml file for HTTP streaming.

      The entry you need to add looks like the following. In addition, you need to include entries for all domains (web sites) that need to access the image.
      .
      .
      .
      <allow-access-from domain="*.ooyala.com" />
      .
      .
      .
                

해당 내용이 도움 되었습니까?