Zype Video API: A few lines of code to a ready-to-watch video player and stream

Overview

Developers can use the Zype Video API to upload video files to the Zype platform, transcode them, and receive back a fully integrated video player and ready-to-watch HLS stream to integrate into websites and applications in just a few lines of code.

In this example, we will show how to upload a file via multipart HTTP POST request, along with additional video metadata. Zype will automatically transcode the video as soon as the upload completes. We will then show how to get back a fully integrated video player that is ready to embed, as well as a ready-to-watch video stream.

NOTE: This example is written in ruby and leverages the ‘httpparty` and `json` ruby gems. Any language is supported that can speak http.

1. Setup your Environment

First, you will need a Zype account. If you don’t have one please request one at https://www.zype.com/request-demo/. You’ll need to retrieve your Upload API Key and Player API Keys from the platform from the API Key Settings section.

2. Upload Your Video

require 'httparty'
require 'uri'
require 'json'

# Configure script
Upload_api_key = "ZYPE_UPLOAD_API_KEY"
Player_api_key = "ZYPE_PLAYER_API_KEY"
Path_to_file = "LOCAL_PATH_TO_VIDEO_FILE"

# Upload your video to Zype
puts upload_response = HTTParty.post(
 'https://uploads.zype.com/uploads?api_key=#{Upload_api_key}', 
 multipart: true, 
 body: { 
   upload: { 
     file: File.open(Path_to_file), 
     title: 'My Video Title', 
     active: true, 
     description: 'Some video description'
   } 
 })

3. Retrieve your Video ID (from the Upload API call response)

Now that you’ve uploaded the file, you can start using the unique Video ID

# Take the upload api response and set video_id to the new value
# You will need the video_id for next steps
video_id = upload_response["response"]["video_id"]

You can do a lot with the video file outside the scope of this article. Learn more in our Dev Center.

4. Retrieve a Video Player to embed or a Streaming URL

# Get the player embed
player_response = HTTParty.get(
 "https://player.zype.com/embed/#{video_id}?api_key=#{Player_api_key}")
 
# OR, Get the streaming manifest URL
manifest_response = HTTParty.get(
 "https://player.zype.com/manifest/#{video_id}?api_key=#{Player_api_key}")

For the player_response, you’ll get back a video player that is ready to embed into your website. It will look something like this:

"https://player.zype.com/embed/5de9664fe6ab785e13bc882a.html?api_key=9d376352-1f60-42e3-9f4e-6ffd12fb72eb"

For embedding into a website, you can use an iFrame. For example:

<iframe src="https://player.zype.com/embed/5de9664fe6ab785e13bc882a.html?api_key=9d376352-1f60-42e3-9f4e-6ffd12fb72eb&autoplay=true&controls=true" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

You can also embed using JavaScript, or have the video automatically show up in your OTT or mobile app endpoints.

Retrieving a Streaming URL

For playing directly using your own player infrastructure, use the streaming URL. This will be a fully functional HLS Manifest URL that is ready to attach to any video player on any device. It will look like this:

https://player.zype.com/manifest/5de964dbb2540e5e22945970?api_key=9d376352-1f60-42e3-9f4e-6ffd12fb72eb

This will render a well-formed HLS manifest that looks something like this:

#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1239040,RESOLUTION=1128x480,CODECS="avc1.4d001f,mp4a.40.2"
https://manifest.zype.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwOi8vdnNtLnp5cGUuY29tLzU2ODJiMGJiNjk3MDJkMmEwYjAwMDAwMC81ZGU5NjRkYmIyNTQwZTVlMjI5NDU5NzAvNWRlOTY0ZGNiMjU0MGU1ZTIyOTQ1OTcxLzVkYzllNjAwZGExNjMxZTMzMGIwOTI1Mi8yYzdkMjQyNS1hYTM5LTRkMjAtYjM5NS03M2YwODljMTQxMjIubTN1OCIsInBhcmFtcyI6eyI2cExLTVEzeSI6IlNxaTNOZzkwIn0sImV4cCI6MTU3NTU5MTU3NX0.XHxjbH_UT5NBQ538sOInKUTptZoVXvLhYVFsRgDeZ48
 
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2793472,RESOLUTION=1692x720,CODECS="avc1.4d001f,mp4a.40.2"
https://manifest.zype.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwOi8vdnNtLnp5cGUuY29tLzU2ODJiMGJiNjk3MDJkMmEwYjAwMDAwMC81ZGU5NjRkYmIyNTQwZTVlMjI5NDU5NzAvNWRlOTY0ZGNiMjU0MGU1ZTIyOTQ1OTcxLzVkYzllNjVhZGExNjMxZTMwODZmNTJkNC9hZTA1NjViNi1jODE4LTRhMjctYTNiZS04NjczMWRjZGE3ODcubTN1OCIsInBhcmFtcyI6eyI2cExLTVEzeSI6IlNxaTNOZzkwIn0sImV4cCI6MTU3NTU5MTU3NX0.PT2917E26tIn4KO3J0NucujQn8RPQMHknWU-A-G1teg

And that's it! Happy streaming!

Complete Ruby Example

require 'httparty'
require 'uri'
require 'json'
 
# Configure Script
Upload_api_key = "ZYPE_UPLOAD_API_KEY"
Player_api_key = "ZYPE_PLAYER_API_KEY"
Path_to_file = "LOCAL_PATH_TO_VIDEO_FILE"
 
# Upload your Video to Zype
puts upload_response = HTTParty.post(
 "https://uploads.zype.com/uploads?api_key=#{Upload_api_key}",
 multipart: true,
   body: {
     upload: {
     file: File.open(Path_to_file),
     title: "My Video Title",
     active: true,
     description: "Some video description"
   }
 })
 
# Take the upload api response and set video_id to the new value, you will need the video_id for next steps
video_id = upload_response["response"]["video_id"]
 
# Get the player manifest
puts manifest_response = HTTParty.get("https://player.zype.com/manifest/#{video_id}?api_key=#{Player_api_key}")
 
# OR
# Get the player embed
puts player_response = HTTParty.get("https://player.zype.com/embed/#{video_id}?api_key=#{Player_api_key}")

0 0

Was this article helpful?

0 out of 0 found this helpful

Articles in this section

How can we help?