Skip to main content

​
Main principles

A built-in HTML web player is a ready-made video player provided by the platform. It runs inside an Iframe, so it can be easily embedded into any website or opened directly via a link. For most cases where you just need to show video quickly and reliably, this is the simplest and best option — no coding, no extra setup.
Functionality of built-in player:
  • Instant playback
  • Supports all web browsers
  • Supports Live streams, and VOD
  • Branding, logo, color customization
  • Statistics of views
  • Embed into any web site via HTML iframe
  • Direct access as HTML web page via direct link
Example code to embed this demo player looks pretty simple: 
<iframe
  src="https://player.gvideo.co/videos/2675_de6eWEOdUoCe77cg?sub_lang=en&t=5s"
  width="100%"
  height="360"
  loading="lazy"
  allow="autoplay; fullscreen; picture-in-picture"
  allowFullScreen
/>
For more specific or advanced scenarios — such as fine-grained control over initialization and configuration — it is better to use a JavaScript-based web player that exposes the full player API. This approach requires more development effort but gives maximum flexibility.

​
Customization options

Let’s compare the default and custom player. To show you the customization options:
  • We set new interface colors.
  • Add a logo (dog icon in the bottom-right corner).
  • Add the button to select the playback speed.
  • Enable the “mute” option by default.
customization options
1. Go to the Players tab and click Create a player.
Players tab
2. Enter the name of your player (it will be displayed in the Gcore Customer Portal) and click Create.
Enter the name of your player
The configuration page opens. Complete the remaining steps in it.
The configuration page
3. Set the custom player as the default one for VOD or/and Live stream if you want to use this player for all videos/streams. You can also choose a custom player for a specific video or stream. 4. Enable necessary video behavior options:
  • Autoplay. If the option is active, a video starts playing automatically when a user opens the website page with it. This option should be enabled if you want to playback Live imitation automatically.
  • Mute. If the option is active, video plays with the sound off.
If both Autoplay and Mute options are active, only one option will work. It depends on an end user’s browser policy (Mozilla, Chrome).
5. Enable necessary player control options:
  • Disable skin. If the option is active, the player control elements are hidden.
  • Save user settings. If the option is active, users watch the video with the same quality and sound settings they have had previously. It works until the browser cache gets cleared.
  • Share video. If the option is active, a sharing button appears in the upper-right corner of the video for the users to post it to social networks.
  • Playback speed control. If the option is active, users can slow down and speed up VOD playback.
  • Pause when clicking on player. If the option is active, video stops by clicking at any point on the player’s screen.
6. Select colors for different elements of your player:
  • Background color for the bottom panel of the player.
  • Foreground color for the elements on the bottom panel.
  • Text color for timeline.
  • Hover color for those elements on the bottom panel that the cursor is hovering over.
7. To collect data on your viewers’ actions in the player, activate the Enables Google Analytics option and specify your Google Analytics ID. 8. Add a logo that will be displayed on the screen. 9. Select the logo position. 10. Save changes.

​
Embed into a web page

​
Embed via iframe

Just copy value if Iframe embed code field from Live and VOD page in UI Customer Portal and insert into your web page on Wordpress, Wix, etc. Example: 
<iframe width="560" height="315" src="https://player.gvideo.co/videos/2675_mvsPGvDVx0Hzbog" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Just copy value if Iframe embed code field from Live and VOD page in UI Customer Portal and insert into your web page on Wordpress, Wix, etc. Example (copy-paste into your browser): 
https://player.gvideo.co/videos/2675_mvsPGvDVx0Hzbog
It will open a new web page: click here

​
Customize player behavior using query string

You can make real-time adjustments to the player’s functionality by adding the following parameters to the player’s URL:
  • ?no_low_latency
  • ?t=(time)
  • ?sub_lang=(language)

​
?no_low_latency

Use this parameter to ensure that the player uses non-low-latency streams HLS MPEG-TS instead of MPEG-DASH CMAF or LL-HLS CMAF. This parameter takes no arguments. Applicable only for Lives. Example: https://player.gvideo.co/broadcasts/2675_21606?no_low_latency

​
?t=(time)

Set time to rewind from the beginning of play. It only applies to video on demand (VOD). Applicable only for VOD. This parameter takes two arguments:
ArgumentDescriptionExample
t = (integer)Number of seconds to start playing from.t=15

https://player.gvideo.co/videos/2675_iKbrdNMcS9ylGuw?t=15
t = [(integer)h][(integer)m][(integer)s]Set start time point in HMS format, where h = hours, m = minutes, s = seconds.t=1h30m, 34m, 2m30s

https://player.gvideo.co/videos/2675_iKbrdNMcS9ylGuw?t=1m2s

​
?sub_lang=(language)

Display subtitles in a specific language. This parameter takes the following argument: Applicable only for VOD.
ArgumentDescriptionExample
sub_lang = (ISO language code, 2 letters)Use two letters that correspond to the ISO 639 language codes.sub_lang=de

https://player.gvideo.co/videos/2675_iKbrdNMcS9ylGuw?sub_lang=de
Please note that here a simplified 2-symbol language code is indicated as more understandable to the average user (while in the API 3 symbols are used everywhere for internal needs).
⌘I