Docs

Video Playback

Please feel free to create an issue if you have any questions not answered by this documentation.

Overview

After a user has selected a video, you will have received and saved a MediaId. This MediaId, along with user information may be exchanged for a View Key via server to server communication. Once you’ve created a View Key, it may be used to embed a video player into the user’s browser via an iframe.

Prerequisites

Before you begin you should have obtained the following via other steps listed in this documentation.

Creating a View Key

1. Obtain an access token

In order to create a View Key, you first must obtain an OAuth2 access token, via a client credentials grant.

Please see Obtaining an Access Token for details on how to acheive this.

2. Creating a View Key

To obtain a View Key, make a POST request to the View Key endpoint provided by the API.

Resource URL

POST https://integrations.clickviewapp.com/api/v1/smart-embed/create-view-key

Headers |Header|Required|Description| |—|—|—| |Authorization|required|Specifies the type of authentication and includes an access token. In this case, it’s a Bearer token.| |Content-Type|required|Specifies the type of content in the HTTP request body. In this case, it’s set to application/json.|

Body |Name|Required|Description| |—|—|—| |mediaId|required|Unique identifier for the media to create a view key for.| |data|required|Please see Data required for creating a view key for information on populating the data property|

Example usage Here is an example using curl:

curl --request POST \
  --url https://integrations.clickviewapp.com/api/v1/smart-embed/create-view-key \
  --header 'Authorization: Bearer YOUR_ACCESS_TOKEN' \
  --header 'Content-Type: application/json' \
  --data '{
    "mediaId": "YOUR_MEDIA_ID",
    "data": {
      "student": false,
      "firstName": "Valerie",
      "surname": "Frizzle",
      "email": "valerie.frizzle@school.gov",
      "jobTitle": "Bus driver",
      "schoolName": "Walkerville Elementary School",
      "schoolId": "S123",
      "districtName": "Riverside Unified School District",
      "districtId": "D123"
    }
  }'

3. View Key response

A successful response will return a JSON object containing the viewKey field, which can be used to embed a ClickView video. Here is an example of a successful JSON response:

{
  "mediaId": "123",
  "viewKey": "eyJz93a...k4laUWw",
  "embedUrl": "https://integrations.clickviewapp.com/smart-embed/play?viewKey=eyJz93a...k4laUWw"
}

At this point you’ve created a View Key and are able to see what playing a video looks like 🎉. Go ahead and paste the embedUrl into your browser to give it a try!

Note: The created View Key has a lifetime of 8 hours. A new View Key should be created every time a user attempts to watch a video. However an already loaded View Key will refresh it’s own lifetime, so playback will continue to work for a user who has already loaded the video.

Using your View Key to play a video

Once you have created a View Key, you may use it to embed the video using an iframe.

Here is a simple example of an iframe for playing back a video. Video playback will not require the user to sign in or have an account.

<div style="padding:56.25% 0 0 0; position:relative;">
  <iframe
    src="https://integrations.clickviewapp.com/smart-embed/play?viewKey=eyJz93a...k4laUWw"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
    allow="autoplay"
  ></iframe>
</div>

NOTE: The div wrapping this iframe is optional, but provides an example of how to allow your iframe to display itself responsively. The vast majority of our videos are in a 16:9 aspect ratio, and our player will handle videos that are not gracefully when rendered in a 16:9 ratio.

Best practices

Next steps

If you’ve made it this far, congratulations you’re almost done. There is just one thing left to do, which is make sure any failure states are gracefully handled. Please see Error handling and troubleshooting.