docs: Player

HTML5 Video Player

Features:

  • Multi-CDN – by monitoring the performance of several CDNs we determine automatically how the video should be delivered to the end user.
  • Google Cast enabled – available in Chrome browser.
  • Airplay enabled – available in Safari browser.
  • 360/VR – player is ready for 360/VR content.
  • Adaptive bitrate streaming – the player automatically adapts to the end users bandwidth and browser to secure fast playback.

Whenever a video is uploaded via the API, an embed URL is generated. The URL is called embed_url” in the video objectThis links to a page that shows the video in the browser, and can also be embedded into other pages. The poster image is automatically generated using advanced image recognition algorithms and is called thumbnail_url in the video object. Below you can see an example of an embedded version of a video uploaded through the SYNQ API.

Embedding your video

To embed a video in your page, simply use an iframe tag with src set to a valid embed link. You also need to give the iframe an allowFullScreen attribute if you want the video to be able to go fullscreen.

The following is a minimal html snippet to embed a video:

Customization

You can also modify the player’s behavior by adding parameters to the embed link’s query string. For customizing the looks, leave out the ‘#’ in the beginning of the hex color.

Parameter Function Type Default
autostart Automatically start the video when the user enters the webpage.
Note: Does not work on mobile devices.
Boolean false
mute Start the video with no audio volume.
Note: The user can still unmute the video through the volume controls.
Boolean false
repeat Automatically replay the video once it’s over. Boolean false
autofullscreen Automatically fullscreen the player when the user first starts the video.
Note: Does not work together with autostart.
Boolean false
seek Set the starting point of the video, in seconds. Number 0
preload Start buffering the video before the user starts playing it.
Note: Preload functionality can vary from browser to browser.
Boolean true
skin.background Set the color of the video controls’ background. Hex color 000000
skin.inactive Set the color of the video controls’ non-highlighted elements. Hex color FFFFFF
skin.active Set the color of the video controls’ highlighted elements. Hex color 43BFA7

 

For example, the following code will create a video that plays automatically when the site is loaded, without sound, and restarts once it’s finished. It also changes the color of highlighted items in the controls to a purple color.

 

If you like colors we added another example of how you can customize the looks of the embedded player. The background is set to: 4E579E , buttons: F47D42 buttons highlight: FFFFFF.

360/VR

When uploading spherical video (360 degrees) you can just add “&spherical=true” to the end of your embed URL and you can pan directly in the player window. This has some limitations on mobile.

Now you are ready to embed your videos. Check out the resources below to take full advantage of our video player and all of its features.

API reference

API Reference

Get in-depth information about SYNQs API and SDKs. Authentication functions, parameters, response formats, and error codes - find it all here.

Open API reference
SYNQ on GitHub

SDKs on GitHub

Easily use SYNQs API in the programming language of your choice. Download and install helpers for Objective-C, Java, JavaScript, Python and more.

Go to GitHub