Play a Video

Once you have retrieved a Series' episodes you will want to allow your application's users to play a video.

Prerequisites

To run through the following steps, you will need to have created an application and have an access token. The Getting Started Guide provides steps on how to do that.

Episode Playback Info

Each episode in an API response has a playback property which is an array containing properties relevant for playing a video. An episode may have multiple means of playback and hence the playback array may contain many elements.

For purposes of this guide, we will focus on the direct video playback type.

The table below describes what playback properties you can expect:

Name Type Description
aspectRatio string The video aspect ratio.
definition string The video definition, 'hd' or 'sd'.
duration number The duration of the video in seconds.
provider string If applicable, the entity who makes the video available (where the video is hosted), e.g. 'Hulu', 'Netflix', 'Revision3' etc.
mediaUrl string The url to the video resource.
mediaType string The media type of the mediaUrl. For example, video/mp4. Media type "/" indicates that video format will be determined at the point of the request using user agent detection.

Direct Playback

Assuming your user has selected to watch an Episode from the AwesomenessTV series. You will have already retrieved the episodes for that Series at https://api.wurl.com/api/series/395178/episodes.

This is what the properties of the first episode may look like. Note the we use mock data for the sake of readability:

"properties": {
    "id": 31334969,
    "studioName": "info@wurl.com",
    "description": "Lola Gold entices The Awesomes to boost their profile.",
    "channelsRank": 59.660391342665,
    "height": 720,
    "pubDate": "2015-10-12T14:12:02.000Z",
    "title": "The Awesomes Season 2 Ep 5 - The Awesome's Awesome",
    "link": "http://wurl.com",
    "thumbnails": {
      "default": {
        "url": "http://static1.wurl.com/thumbs/2245/episodes/31334969-jpg"
      }
    },
    "showId": 395178,
    "playback": [
      {
        "aspectRatio": "16:9",
        "definition": "hd",
        "duration": 318,
        "embed": "<video controls preload=\"auto\" height=\"448\" style=\"width: 100%; image-fit: fill; object-fit:fill;\" poster=\"http://static1.channels.com/thumbs/2245/episodes/31334969-jpg\">\n    <source src=\"http://media.wurl.com/auto/7e6884ebe/item.wurl\" type=\"*/*\"/>\n</video>\n\n",
        "mediaUrl": "http://media.wurl.com/auto/7e6884ebe/item.wurl",
        "provider": "",
        "mediaType": "*/*",
        "type": "html5"
      },
      {
        "aspectRatio": "16:9",
        "definition": "hd",
        "duration": 318,
        "mediaUrl": "http://media.wurl.com/auto/7e6884ebe/item.wurl",
        "provider": "",
        "mediaType": "*/*",
        "type": "direct"
      }
    ],
    "width": 1280
  }

The mediaUrl property can be passed to your video player for playback.

For an example using a set top box device, see our sample roku app

Live Example

In this section we have placed the mediaUrl from a response as the source url for a standard video tag to play the video.

<video controls preload="auto" height="448" style="width: 100%; image-fit: fill; object-fit:fill;" poster="">
  <source src="http://msnbcpod.vo.llnwd.net/l1/video/podcast/pdv_nn_netcast_m4v-12-12-2013-180614.m4v" type="video/x-m4v"/>
</video>

If your browser supports the HTML5 <video> tag and MP4 H.264, then the video should appear below using the browser's native controls.

Play a Video

Once you have retrieved a Series' episodes you will want to allow your application's users to play a video.

Prerequisites

To run through the following steps, you will need to have created an application and have an access token. The Getting Started Guide provides steps on how to do that.

Episode Playback Info

Each episode in an API response has a playback property which is an array containing properties relevant for playing a video. An episode may have multiple means of playback and hence the playback array may contain many elements.

For purposes of this guide, we will focus on the direct video playback type.

The table below describes what playback properties you can expect:

Name Type Description
aspectRatio string The video aspect ratio.
definition string The video definition, 'hd' or 'sd'.
duration number The duration of the video in seconds.
provider string If applicable, the entity who makes the video available (where the video is hosted), e.g. 'Hulu', 'Netflix', 'Revision3' etc.
mediaUrl string The url to the video resource.
mediaType string The media type of the mediaUrl. For example, video/mp4. Media type "/" indicates that video format will be determined at the point of the request using user agent detection.

Direct Playback

Assuming your user has selected to watch an Episode from the AwesomenessTV series. You will have already retrieved the episodes for that Series at https://api.wurl.com/api/series/395178/episodes.

This is what the properties of the first episode may look like. Note the we use mock data for the sake of readability:

"properties": {
    "id": 31334969,
    "studioName": "info@wurl.com",
    "description": "Lola Gold entices The Awesomes to boost their profile.",
    "channelsRank": 59.660391342665,
    "height": 720,
    "pubDate": "2015-10-12T14:12:02.000Z",
    "title": "The Awesomes Season 2 Ep 5 - The Awesome's Awesome",
    "link": "http://wurl.com",
    "thumbnails": {
      "default": {
        "url": "http://static1.wurl.com/thumbs/2245/episodes/31334969-jpg"
      }
    },
    "showId": 395178,
    "playback": [
      {
        "aspectRatio": "16:9",
        "definition": "hd",
        "duration": 318,
        "embed": "<video controls preload=\"auto\" height=\"448\" style=\"width: 100%; image-fit: fill; object-fit:fill;\" poster=\"http://static1.channels.com/thumbs/2245/episodes/31334969-jpg\">\n    <source src=\"http://media.wurl.com/auto/7e6884ebe/item.wurl\" type=\"*/*\"/>\n</video>\n\n",
        "mediaUrl": "http://media.wurl.com/auto/7e6884ebe/item.wurl",
        "provider": "",
        "mediaType": "*/*",
        "type": "html5"
      },
      {
        "aspectRatio": "16:9",
        "definition": "hd",
        "duration": 318,
        "mediaUrl": "http://media.wurl.com/auto/7e6884ebe/item.wurl",
        "provider": "",
        "mediaType": "*/*",
        "type": "direct"
      }
    ],
    "width": 1280
  }

The mediaUrl property can be passed to your video player for playback.

For an example using a set top box device, see our sample roku app

Live Example

In this section we have placed the mediaUrl from a response as the source url for a standard video tag to play the video.

<video controls preload="auto" height="448" style="width: 100%; image-fit: fill; object-fit:fill;" poster="">
  <source src="http://msnbcpod.vo.llnwd.net/l1/video/podcast/pdv_nn_netcast_m4v-12-12-2013-180614.m4v" type="video/x-m4v"/>
</video>

If your browser supports the HTML5 <video> tag and MP4 H.264, then the video should appear below using the browser's native controls.