Get the URL of the video
To get the source of a video, you need to use the hashed key generated in the last step.
You need to request the secure URL using Curl or an equivalent (
HttpClient for .NET,
http.request for NodeJS etc...). You then use the secure URL as the
src of the video
Here is an example in PHP :
<?php $ch = curl_init(); curl_setopt_array($ch, array( CURLOPT_RETURNTRANSFER => 1, CURLOPT_URL => 'https://api.myinterview.com/2.21.2/getVideo?apiKey='.$apiKey.'&hashTimestamp='.$timestamp.'&hash='.$hashKey, CURLOPT_SSL_VERIFYPEER => false )); $url = curl_exec($ch); curl_close($ch);
<video id="video-container" width="440" height="248" src="<?=$url;?>" controls></video>
The video generated signed URL is then valid for the next 10 minutes and expires, ensuring no one can access the video using the same link.
Integrating the video
To display the video we recommend 2 possibilies: native HTML5 or Video.js
About HTML5 video
The HTML5 specification introduced the
<video> element, partially replacing the
<object> element. It has become the new standard to show video on the web, replacing Adobe Flash plugin.
preloadattribute is used when autoplay attribute is not used. this attribute has 3 options:
preload="none". This tells the browser not to download any of the video.
preload="metadata", tells the browser to download metadata, such as length of the video or its format.
preload="auto", the default parameter. Advises the browser to download the entire video.
controlsattribute, which activates default browsers controls (play/pause/volume/time).
Video.js is a web video player that removes differences between browsers, both on desktops and mobile devices. Video.js API
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"></video>
In case of a large amount of videos, you may prefer using
preload="metadata"to not load too much useless data.
In case of a single video, you may prefer using
preload="auto". In iOS we cannot be sure the video will be preloaded, but it will work all the time on Desktop browsers and makes the video readable immediately.
We recommend using Video.js if the extra bytes to load is not an issue. It will give you a nicer design, increase customisation possibilities, it takes care of the cross-browser issues and fixes some bugs in the implementation. By the way, we based our player implementation on Video.JS