External player can play videos not uploaded to Viqeo platform by editor. The external player is similar to standard players like JW Player, Kaltura, Flow Player but adapted for text environment. So you can use needed settings (Such as 'Autoplay') right as with manually uploaded videos. Just select a needed Preset and the Player will use its settings.
External player can play:
Video URL | m3u8-playlist (Live stream) | Youtube | SWF / GIF |
|
|
| 2. Automatically transcode to Viqeo Server |
To create a new player press button 'Create player' and select a type of a player:
After creation of External player, select a preset you want to use and press 'Get code'.
You will Code similar to below:
Code implementation example
<script async src="//cdn.viqeo.tv/js/vq_starter.js"></script> <div style="width:100%;height:0;position:relative;padding-bottom: 57%;" class="viqeo-external_player" data-playerId="01" data-profile="001" data-videoSrc="URL of your video" data-previewSrc="(optional) video preview. URL of preview image or remove this line if you don't have a preview image" > <iframe src="//cdn.viqeo.tv/embed/?videoSrc=URL of your video&playerId=89" width="100%" height="100%" style="position:absolute;" frameBorder="0" allowFullScreen></iframe> </div>
Where:
data-videoSrc = paste here URL you want to play
If you want to play videos added by editors in the Viqeo platform — you can use path "npvid:videoid" as URL, where videoid is a video id in embed code.
data-previewSrc = if you have preview image paste here URL to image. If you don't have — just remove this line.
iframe src="//cdn.viqeo.tv/embed/?videoSrc= add here URL (the same to data-videoSrc) to your video to create iframe while video is loading.
Youtube video replacement
❗️ You can change all Youtube embeds to Viqeo player using an External player. Just place URL 'https://www.youtube.com/embed/6Y6Oj7Sm4mc' as an URL for an External player.
Read detailed info on Youtube playback here.
Adaptive streaming (Multi-Bit Rate)
If you have few video streams transcoded as separate mp4-files (or have different video sizes), use JSON array to support adaptive streaming:
data-videoSrc='[{"url": "http://stage.api.viqeo.tv/storage/09/2c/9abb51d0cdaeac2ff129aa0b4557473a.mp4"}, {"url": "http://stage.api.viqeo.tv/storage/09/2c/e659e4a100f6b61f20d7fd041e1a1d29.mp4"}, {"url": "http://stage.api.viqeo.tv/storage/09/2c/51a5189b20040aad8fd08913542644f4.mp4"}]'
Where first file is default — this video is used to create a key-value, but all other files can be added in any sequence.
Live streams
Also you can play adaptive bitrate videos by replacing file by URL to HLS m3u8-playlist file with various video streams in HLS format
Add m3u8-file URL to data-videoSrc as a video file and file will be played as set up in the platform.
Playing videos uploaded by editors via external player
To play videos uploaded by editors in the Viqeo platform — you can use path "npvid:videoid" as URL, where videoid is a video id in embed code.
Example:
Editor uploaded video, you can open 'Code' and see the code. Find 'data-vnd="dbede3a6e5cffb739110' to get video id.
To play this video via external editor you have to show data-videoSrc='npvid:dbede3a6e5cffb739110'
Player will get all transcoded streams from the server so adaptive streaming will work
External player in AMP
To add a player to AMP-Pages please use Viqeo AMP-tag. Here is an instruction.
Setting up extra options on the page
Disabling ads in selected video
To turn off ads in exact video you can easily add following attribute to embed code:
data-content=”negative”
Example:
Example of code with ads disabled
<script async src="//cdn.viqeo.tv/js/vq_starter.js"></script> <div style="width:100%;height:0;position:relative;padding-bottom: 57%;" class="viqeo-external_player" data-playerId="01" data-profile="001" data-content="negative" data-videoSrc="URL of your video" data-previewSrc="(optional) video preview. URL of preview image or remove this line if you don't have a preview image" > <iframe src="//cdn.viqeo.tv/embed/?videoSrc=URL of your video&playerId=89" width="100%" height="100%" style="position:absolute;" frameBorder="0" allowFullScreen></iframe> </div>
Sticky-player (Always on top)
To make your player 'Always on top' or to control the player via events or to receive events from the player you have to use Javascript API.
Here is how you can read how to create a sticky (Always on top) player.