logo api.video

Tutorials · 5 min read

Using api.video with 3rd party video players

api.video is a full service video platform. From video upload -> transcoding -> hosting -> playback -> analytics, we can take you through the entire video delivery process from start to finish. But maybe you already have a player integrated that you'd like to continue using. No problem!! In this post, we'll walk through how to use external video players with api.video.

Doug Sillars

March 2, 2021

Update March 2021. We now have libraries to incorporate api.video analytics in your 3rd party player integration. Learn more in our forum post.

api.video is a full service video platform. From video upload -> transcoding -> hosting -> playback -> analytics, we can take you through the entire video delivery process from start to finish.

But maybe you already have a video player integrated that you'd like to continue using. No problem!! In this post, we'll walk through how to use external video players with api.video.

The api.video player

The api.video player has integrated analytics, and can be fully customized. You may be dead-set on using your external player - but you should take a look anyway.

Other players

You're here because perhaps you have already integrated a player in your service, or have picked a 3rd party player for your service. It is incredibly easy to use api.video's encoding, video hosting and delivery with an external player. In this post, we'll show how to integrate with videoJS and THEOplayer, but any JavaScript video player will have a similar integration.

Getting Started

To integrate api.video into an external player, you'll need an api.video video or livestream (of course!). When you query a video, you'll get a response that looks like:

{
	"videoId": "vi4blUQJFrYWbaG44NChkH27",
	"title": "Buskers Playing Beatles on Tubas",
	"description": "Recorded March 2019 in Bremen, Germany",
	"public": true,
	"panoramic": false,
	"mp4Support": true,
	"publishedAt": "2020-04-01T17:00:30+00:00",
	"createdAt": "2020-04-01T17:00:30+00:00",
	"updatedAt": "2021-01-13T09:32:31+00:00",
	"tags": [
		"discourse"
	],
	"metadata": [

	],
	"source": {
		"type": "upload",
		"uri": "/videos/vi4blUQJFrYWbaG44NChkH27/source"
	},
	"assets": {
		"iframe": "<iframe src=\"https://embed.api.video/vod/vi4blUQJFrYWbaG44NChkH27\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"true\"></iframe>",
		"player": "https://embed.api.video/vod/vi4blUQJFrYWbaG44NChkH27",
		"hls": "https://cdn.api.video/vod/vi4blUQJFrYWbaG44NChkH27/hls/manifest.m3u8",
		"thumbnail": "https://cdn.api.video/vod/vi4blUQJFrYWbaG44NChkH27/thumbnail.jpg",
		"mp4": "https://cdn.api.video/vod/vi4blUQJFrYWbaG44NChkH27/mp4/1080/source.mp4"
	},
	"playerId": "pt4bkKft8tU7o9csd8oHWVUn"
}

The 'hls' url is what we'll need to inetgrate with external players. This manifest file is actually called inside the api.video player, and describes the video stream that is created on video upload.

If you are using a 3rd party player already, you can just swap in the HLS link, and all should be good. You can also use the thumbnail url as the poster image for the video.

Live streaming

If you want to use a live stream with a 3rd party video player, the live API response also has a 'hls' url that can be used in the same way as the VOD parameter described. For the rest of this article, we'll focus on video on demand, but the same technique can be used for live video as well.

Example with video.js

The api.video player is built on top of video.js. But if you want to just use the default video.js player, you can start by grabbing the demo code from the "get Started" page, and make 4 simple edits:


<head>
  <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="1280"
    height="720"
    poster="https://cdn.api.video/vod/vi4blUQJFrYWbaG44NChkH27/thumbnail.jpg"
    data-setup="{}"
  >
    <source src="https://cdn.api.video/vod/vi4blUQJFrYWbaG44NChkH27/hls/manifest.m3u8" type="application/x-mpegURL" />
    
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
</body>

The changes made:

  1. Poster is now the Thumbnail url from the api.video response.
  2. Source 'src' is now the HLS url from the api.video response
  3. source 'type' is now 'application/x-mpegURL'
  4. I deleted the other sources, as only one is required.

save this page, and open in your browser, and success!

screenshot of videojs player

Example with THEOPlayer

When you sign up with the THEOPlayer, you'll have a unique SDK for your app. In this example we created a HTML5 SDK, and copied the example code from the THEOPlayer documentation:


<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>THEOplayer 2.X: Getting Started</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" type="text/css" href='https://cdn.myth.theoplayer.com/42bd7cab-87eb-4f38-8fb6-7f39ee2af729/ui.css'> <!-- adds THEOplayer CSS -->
  </head> 
  <body>
    <div class="theoplayer-container video-js theoplayer-skin"></div>
    <script type='text/javascript' src='https://cdn.myth.theoplayer.com/42bd7cab-87eb-4f38-8fb6-7f39ee2af729/THEOplayer.js'></script> <!-- adds THEOplayer library -->
    <script>
      var element = document.querySelector('.theoplayer-container'); 
      var player = new THEOplayer.Player(element, { 
        libraryLocation : 'https://cdn.myth.theoplayer.com/42bd7cab-87eb-4f38-8fb6-7f39ee2af729'
      });
      
      player.source = {
        sources : [{
          src : 'https://cdn.api.video/vod/vi4blUQJFrYWbaG44NChkH27/hls/manifest.m3u8',
          type : 'application/x-mpegurl'
        }]
      };
    </script>
  </body>
</html>

Again, with a few modifications:

  1. libraryLocation: This value will be given to you from THEOPlayer for your SDK.
  2. player.source src: the hls url from api.video.
theoplayer screenshot

Private videos/livestreams with a 3rd party player

api.video has a private video/livestream attribute (where each video or livestream playback url is unique and can only be used once). To use our private feature with a 3rd party player, there is some development work required to insert a new header. We've described the work required in our Inserting custom headers post.

Conclusion

api.video has a great player integrated as a part of our "all the video in one API" approach. But, sometimes you might want to use your own player. The 'hls' url provided from api.video for each video and livestream lets you use your existing player structure, and still make use of api.video's upload, transcoding, hosting and delivery.

Sign up and try out api.video with our player (or another 3rd party player) today!

LATEST ARTICLES

What is a webhook?

Tutorials · 8 min read

What is a webhook and how to use webhooks for real-time video management

Answer critical questions like what are webhooks, how they work, and how you can use them for video management.

api.video · September 12, 2024

AI face recognition (React)

Tutorials · 4 min read

How to build AI facial expression detection into your videos with React

Learn how to add AI facial expression detection to your videos using one of Javascript's powerful libraries, React.

Yohann Martzolff · June 26, 2024

AI face recognition (Javascript)

Tutorials · 4 min read

How to integrate AI facial expression detection to control your video – Javascript

Learn how to add AI facial expression detection to your videos using Javascript.

Yohann Martzolff · June 25, 2024

Try out more than 80 features for free

Access all the features for as long as you need.
No commitment or credit card required

Video API, simplified

Fully customizable API to manage everything video. From encoding to delivery, in minutes.

Built for Speed

The fastest video encoding platform. Serve your users globally with 140+ points of presence. 

Let end-users upload videos

Finally, an API that allows your end-users to upload videos and start live streams in a few clicks.

Affordable

Volume discounts and usage-based pricing to ensure you don’t exceed your budget.