Skip to content

Player

HLS support matrix using HTML5

Player plugin and core support matrix

Player setup in Dashboard

The service is available in your CDNvideo Dashboard, in the Player section.

You can also instantly find the basic player version (or go to the settings for an advanced configuration) directly in the broadcast settings section (Streaming -> Live Streaming).

Player description

We use open source developments HLS.js, Shaka, and Clappr as base libraries for the player. We develop additional features (as Clappr plugins) ourselves: some are open source, while most of those features are available to customers for a fee.

The libraries and plugin files themselves are hosted on our CDN and can be added to a page as follows: 

 <!-- Player -->
<script type="text/javascript" src="//playercdn.cdnvideo.ru/aloha/clappr/clappr5.min.js"></script>
<script type="text/javascript" src="//playercdn.cdnvideo.ru/aloha/clappr/level-selector.min.js"></script>
<script type="text/javascript" src="//playercdn.cdnvideo.ru/aloha/clappr/stream-selector.min.js"></script>
<script type="text/javascript" src="//playercdn.cdnvideo.ru/aloha/clappr/clappr-styling.min.js"></script>
<script type="text/javascript" src="//playercdn.cdnvideo.ru/aloha/clappr/clappr-poster.min.js"></script>
<script type="text/javascript" src="//playercdn.cdnvideo.ru/aloha/clappr/clappr-logo-plugin.min.js"></script>
<script type="text/javascript" src="//playercdn.cdnvideo.ru/aloha/clappr/clappr-error-handler.min.js"></script>

Example player initialization

<div id="player" class="player"></div>

<script>
    var player = new Clappr.Player({
        language: 'en-EN',
        parentId: "#player",
        source: "//live-streams.cdnvideo.ru/cdnvideo/caminandes/playlist.m3u8",
        width: '100%',
        height: '100%',
        plugins: [LevelSelector, ClapprLogoPlugin, ClapprErrorHandler],
        levelSelectorConfig: {
            labelCallback: function(playbackLevel) {
                return playbackLevel.level.height + 'p'; // Name from SMIL (external_playlist)
            }
        },
        logoPlugin: {
            src: '//playercdn.cdnvideo.ru/aloha/cdn-demo/static/wildberries_logo.png',
            // url: '//cdnvideo.ru/?from=' + window.location.hostname,
            height: 30,
            marginTop: 3,
        },
        hideMediaControl: false,
        clapprErrorHandler: {
            quiet: false,
            text: 'There is no broadcast currently, please wait',
            retryDelay: 5,
            // onRetry: (err) => {console.log(err)}
            onRetry: function (e) {
                console.log(e)
                this.restart()
            }
        },
    });
 </script>

Player API

Basic player API commands (player in the examples below is the name of the player instance when embedded on a page):

  • player.play() - start playback.
  • player.pause() - pause VoD playback.
  • player.stop() - stop Live stream playback.
  • player.volume(value) - change the volume in the player.
  • player.seek(time) - fast forward to the desired time.
  • player.load('new-video-url') - load a new playback source without changing the rest of the configuration.
  • player.getDuration() - get the duration of the video source in seconds.
  • player.getCurrentTime() - get the current video viewing position in seconds.

Chat feature description

The chat is a service based entirely on CDNvideo's own developments. Fast websocket servers run on the backend. On the frontend, there are modules for displaying the chat interface and design.

All front-end modules are hosted on our CDN and are ready to be used as soon as the service is paid for and the chat room is added.

Attention

The chat is not designed for more than three thousand simultaneous users in one room. If there are more than three thousand users, it will be inconvenient for people to communicate in a single stream, and technical difficulties may arise. For large broadcasts, you should not use the option of automatic login into the chat using the client's authorization data. It is also sometimes wise to create a set of chat rooms for a single client and distribute viewers evenly across the rooms.

Chat test stand

Chat test stand: https://playercdn.cdnvideo.ru/aloha/cdn-demo/player_chat_stand.html

Moderator accounts:

  • admin1 (password: password1)
  • admin2 (password: password2)

Please note that the test stand cannot be embedded on live user pages, as access to it may be restricted.

To place a chat in production on your website, you need to select a tariff and write a request to the manager, after which a separate chat room will be created for you and a live chat with an embed code for the website will be created.

After testing and using the moderator account, please log out or close the tab so as not to occupy the test socket. To test the chat without any restrictions and on your own page, you need a live chat. The terms can be discussed with the manager.

Embedding chat directly into the page

For testing purposes, you can import the following files: 

<!-- Chat -->
<link href=//playercdn.cdnvideo.ru/aloha/chat/cdn-chat-app.css rel=stylesheet>
<script type=text/javascript src=//playercdn.cdnvideo.ru/aloha/chat/cdn-chat-manifest.js></script>
<script type=text/javascript src=//playercdn.cdnvideo.ru/aloha/chat/cdn-chat-vendor.js></script>
<script type=text/javascript src=//playercdn.cdnvideo.ru/aloha/chat/cdn-chat-app.js></script>

Chat initialization (frontend API)

<script>
    Chat.init({
        el: '#app',
        width: '100%',
        height: '100%',
        language: 'RU',
        room: 'd11_test',  // chat room
        service: 'wss://chat.cdnvideo.ru/chat',
        maxMessageLength: 255,
        maxMessagesCount: 50,
        timeBetweenMessages: 1,
        maxEqualMessages: 2,
        userName: 'username1',  // auto login with site data (optional)
        userIcon: 'avatar.jpg',  // avatar link or link variable (optional, used for login with site data)
        joinBtnColor: '#007bff',  // Join icon button ('#007bff' by default)
        enableControls: true,  // enable backlight buttons and raise comments to the moderator (false by default)
        emojiBtn: false,  // disable emoji (true by default)
        joinBtnText: 'Ask a question',  // rename the Join button (name is not shown by default)
        hiddenMode: true,  // hide usernames in chat (optional)
        enablePremoderate: true,  // enable premoderation for the chat administrator
        sendBtn: 'btn_url'  // send button url
    });
</script>

Direct websocket requests to chat (backend API)

Establishing a connection to chat and websocket messages

<script>
    // URL for connecting to websocket with administrator credentials
    const url = “wss://chat.cdnvideo.ru/chat?user=admin1&room=d11_test&password=password1”;

    // Create a new websocket connection
    const socket = new WebSocket(url);

    // Connection open handler
    socket.onopen = function() {
        console.log(“Connection established”);

        // Create a message to save the chat history
        const saveMessage = {
            type: “Save”
        };

        // Send the message to the server to save the chat history
        socket.send(JSON.stringify(saveMessage));
        console.log(“Message to save chat history sent”);

        // After sending the first message, send a message to clear the chat
        const clearMessage = {
            type: “Clear”
        };

        // Use a short timeout to ensure that the first message is delivered
        setTimeout(() => {
            socket.send(JSON.stringify(clearMessage));
            console.log(“Message to clear the chat sent”);
        }, 1000); // 1 second delay (can be adjusted as needed)
    };

    // Handler for receiving messages from the server (optional)
    socket.onmessage = function(event) {
        console.log(“Message received:”, event.data);
    };

    // Connection closure handler
    socket.onclose = function(event) {
        if (event.wasClean) {
            console.log(`Connection closed cleanly, code=${event.code} reason=${event.reason}`);
        } else {
            console.log('Connection interrupted');
        }
    };

    // Error handler
    socket.onerror = function(error) {
        console.log(`Error: ${error.message}`);
    };
</script>

Description of the script with API

Message to save chat log: after establishing a connection, a message with the 'Save' type is created and sent to the server.

Message to clear chat: after sending the message to save the chat, a message with the type “Clear” is created.

setTimeout() is used with a delay of 1 second to ensure that the first message is delivered before sending the second. The delay time can be changed depending on requirements.

Event handlers:

  • onopen: handles the logic of sequential message sending.
  • onmessage, onclose, onerror: handles received messages, connection closures, and errors.

This script will first send a message to save the chat, and then, after a short delay, send a message to clear the chat.

Chat command messages

  1. Save chat log 
    {
    "type": "Save"
}
  2. Clear chat 
    {
    "type": "Clear"
}

Example of a message with the chat clearing command

After logging into the chat, you can clear messages.

To do this, the client (browser or Python script) sends the following message via WebSocket: { “type”: “Clear” }.

Message script example with Python

import asyncio
import websockets
import json

async def clear_chat():
    # URL for connecting to the websocket with administrator credentials
    url = "wss://chat.cdnvideo.ru/chat?user=admin1&room=d11_test&password=password1"

    # Headers required for connection
    headers = {
        'Origin': 'https://playercdn.cdnvideo.ru'
    }

    # Establishing websocket connection
    async with websockets.connect(url, extra_headers=headers) as websocket:
        # Connection established

        # Creating chat clear message
        clear_message = {
            "type": "Clear"
        }

        # Sending message to the server
        await websocket.send(json.dumps(clear_message))
        print("Message to clear chat sent")

        # Awaiting server response (optional depending on chat logic)
        try:
            async for message in websocket:
                print(f"Message received: {message}")
        except websockets.ConnectionClosed as e:
            print(f"Connection closed: {e}")

# Run async process
asyncio.get_event_loop().run_until_complete(clear_chat())

Description of message clearing scripts

URL: connection is established via WebSocket using administrator credentials (user=admin1, room=d11_test, password=password1).

Headers: Origin header is set to https://playercdn.cdnvideo.ru.

Chat clearing:

  • A message with the 'Clear' type is created and sent to the server via WebSocket.
  • The message is formed as a JSON object and serialized using json.dumps() before sending.
  • Listening for responses (optional): after sending the command, you can listen for responses from the server, although this is not always necessary.

This script will clear all messages in the chat by sending the correct command via a WebSocket connection.

Message script example with JavaScript

<script>
    // URL for connecting to the websocket with administrator credentials
    const url = "wss://chat.cdnvideo.ru/chat?user=admin1&room=d11_test&password=password1";

    // Creating a new WebSocket connection
    const socket = new WebSocket(url);

    // Connection opening handler
    socket.onopen = function() {
        console.log("Connection established");

        // Creating a message to clear the chat
        const clearMessage = {
            type: "Clear"
        };

        // Sending a message to the server
        socket.send(JSON.stringify(clearMessage));
        console.log("Chat clear message sent");
    };

    // Server message handler (optional)
    socket.onmessage = function(event) {
        console.log("Message received:", event.data);
    };

    // Connection closure handler
    socket.onclose = function(event) {
        if (event.wasClean) {
            console.log(`Connection closed cleanly, code=${event.code} reason=${event.reason}`);
        } else {
            console.log('Connection was cut');
        }
    };

    // Error handler
    socket.onerror = function(error) {
        console.log(`Error: ${error.message}`);
    };
</script>

F.A.Q.

Switching audio tracks

How can I switch between audio tracks in the player? Why doesn't it work on iOS in full-screen mode?

There are two main options for implementing language switching in the player:

  1. Separate streams, switching in the player. This option is more reliable and versatile, easier to configure (the “Playlist” function is available in the web interface, no transcoding of streams is required). However, in iOS, you can only change the stream for playback outside of full-screen mode when using our interface. In full-screen mode, iOS does not support switching between streams, and changing the logic or interface of the native iOS player from outside is prohibited. Therefore, when using this option, you either have to put up with the limitations of iOS or prohibit switching to full-screen mode in iOS.
  2. One HLS stream with audio tracks in the playlist. This option is supported not only by our player, but also by the native iOS player, so switching to full-screen mode on iOS will also be possible. The only problem is creating a stream with this configuration. It must either be provided by the client, or our administrators must be able to convert the stream on the backend to HLS with audio tracks. This is not always easy.

If you need to switch between several streams, each of which has several tracks (languages), then you need to use the second method in conjunction with the first. In accordance with their intended purposes.

Full screen in iOS and YouTube

The YouTube player opens perfectly in full screen mode on mobile devices. Why can't your player do the same?

The problem lies in the peculiarities of iOS: in full screen mode, the browser always launches the native interface, regardless of the player. This also applies to YouTube if you open it in a browser. However, at some point, Safari stopped opening YouTube videos in the browser altogether, automatically redirecting everyone to the YouTube mobile app.

Embedding in social networks

Does the ability to embed the player in social networks depend on the policy of a particular social network regarding embedded content?

Yes. Most social networks do not allow iframes and third-party players to be embedded, so you need to use social network specific standard players to play video content there. To solve this problem, you can use the restream function available in your personal account. On their website, customers can use our player with full functionality. Customers can attach a link to this main page with the player to posts on social networks.

Attributes of the iframe embed code with the player

Where can I find documentation regarding what the various attributes of the iframe tag in the embed code are responsible for? Can they be changed?

Yes, they can be changed: this part is the boundary between our side and the client's side, and the iframe tag is a standard interface that is known to the front-end developer responsible for the client's website. The attributes are described in all HTML manuals: http://htmlbook.ru/html/iframe.

We do not use our own attributes (and cannot according to the HTML standard), and we only specify a set of standard attributes as a recommendation, for example: frameborder="0" width="640" height="360" scrolling="no" style="overflow:hidden;" allowfullscreen. We do not transfer all our settings in the tag attributes, but in the query string parameters of the link to the source player (or the player receives them automatically, from our backend, from the database of settings for a specific client).

JS API for player control

Is there a JS API for player control: for example, rewinding using a command?

Yes, there is. You can find a description of the commands in the player API section.

DRM operation

How does DRM work in the player? Can we integrate your plugin into our player?

You can learn more about how our plugin works at: https://players-stand.cdnvideo.ru/clappr/DRM/. Theoretically, it is possible to use our plugin in a third-party player with some adaptation, but it is easier to write a plugin from scratch. To add DRM support to your own player, you first need to resolve the issue of WideWine and PlayReady support. We use Shaka Player to play MPEG-DASH. It has DRM support implemented.

Video and poster resolution

How does the 640x360 player behave if the stream is still in 1080p, 720p, or 480p? What size should the poster be?

Regardless of the player size, the content will always be stretched to fit that size. If the content resolution is lower than the size of the player, the loss of quality will be noticeable in the form of blurring and “squares.” If the resolution is higher, nothing noticeable will happen. The size of the poster should be based on the expected dimensions of the player at the time the poster is displayed. Here, it is simply a compromise between image quality and file size. When the player size is reduced, the poster will be scaled to fit the player while maintaining its proportions.

Video placeholder for geo-restrictions

Is it possible to display a video placeholder for viewers who do not pass the geo-restriction? At the player level or at the CDN stream distribution level.

The following options are possible:

  • Implementation in the player. The CDNvideo distribution server returns a 403 code in case of geo-restriction (according to the standard), and the player currently in use substitutes a placeholder. Our player does not currently have a video placeholder function, but it does have a static media placeholder function: in case of geo-restriction, any specified image is displayed instead of the stream, with any text on top of it.
  • Implementation on the CDNvideo side, at the stream distribution level. There is no such standard feature, but we can develop a custom proxy server that will analyze each viewer's IP, determine their geography, and output either a regular stream or a placeholder stream depending on this. In this case, the placeholder can be either static or video. You can order the development of this functionality through your manager.

Timecodes and the “share on social media” feature

A new “share video” feature has appeared in the player. If you copy the URL link, can you send a link to the video, even to a specific moment in the video? If you just click “share on social media” or “share on messengers,” will the link send to the website instead of the video?

If you copy from the URL, only the URL will be copied: unfortunately, for security reasons, the player cannot know what viewers are copying outside of it. But if you click “Copy Link” in the player, a link to the page with the timecode will be copied, and when you open it, the player will automatically rewind the video to the desired moment.

As for the “Share on social media” function, the player will generate and send a link to the page with the timecode. It cannot send the video itself because social networks usually do not support embedding third-party videos (bypassing the social network interface).

HTTP FLV for LL and multibitrate

Is it possible to configure multiple qualities when distributing LL FLV?

No, the standard multi-bitrate HTTP FLV protocol does not support this. Of course, you can create several streams with different qualities and enable the stream switching function in the player, but this option will not provide seamless and automatic switching.

For high-quality switching between qualities, you need to use LL HLS. However, it may not work reliably in some browsers.

Autoplay with sound

Is it possible to set up autoplay for videos while leaving the sound on in the player by default?

Autoplay with sound enabled does not depend on the player, but only on browser policy and user settings. By default, it does not currently work in any popular browser, if we are talking about all viewers. However, for some viewers, the sound may be enabled either due to browser settings or if the browser remembers that the user has interacted with media on a particular website. The user (viewer) can enable playback on all domains or on specific domains in the settings of Chrome (and most other browsers).

According to modern standards, autoplay is usually blocked by the browser unless the sound is turned off. There are exceptions, but these are more likely to be flaws in browser development than reliable features.

If you need guaranteed autoplay or guaranteed volume, it is best to choose one or the other.

YouTube auto-plays with sound

Most users have previously interacted with YouTube (or even enabled auto-play with sound for this site), so videos with sound are played more often on average per user. Also, autoplay with sound enabled on YouTube in Chrome may work because these are two products from the same company, Google. However, Firefox and most other browsers will block autoplay on YouTube if the sound is enabled.