HTML5 Video Player
- 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 object. This 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:
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.
|autostart||Automatically start the video when the user enters the webpage.
Note: Does not work on mobile devices.
|mute||Start the video with no audio volume.
Note: The user can still unmute the video through the volume controls.
|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.
|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.
|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.
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.