Custom Video

If you want to build your own player here are some tips to do so

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.


Parameters


  • The preload attribute is used when autoplay attribute is not used. this attribute has 3 options:

    1. preload="none". This tells the browser not to download any of the video.

    2. preload="metadata", tells the browser to download metadata, such as length of the video or its format.

    3. preload="auto", the default parameter. Advises the browser to download the entire video.

  • The controls attribute, which activates default browsers controls (play/pause/volume/time).

About Video.js


Video.js is a web video player that removes differences between browsers, both on desktops and mobile devices. Video.js API


Examples


HTML5 video



                <video width="320" height="240" controls>
                <source src="movie.mp4" type="video/mp4"></video>

Video.js


Video.js setup
Implementation example

Comparison


pros cons
HTML5 Video
  • Native to browser.
  • No external library is required.
  • Native controls not consistent among browsers.
  • Complicated to customise.
  • Some bugs in the implementation.
Video.js
  • Compatible with all devices.
  • Fix browser and device bugs in the <video> implementation.
  • Easy custom skinning, consistent among browsers.
  • Adding a library and updating it.

Tips

  • 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.

Conclusion

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