On this page

Player Basic Usage

Minimum example

Include player source code in the page
Create container for the player
Initiate player

<html>
<head>
  <meta charset='utf-8'>
</head>
<body>
    <script src='https://player-static.qencode.com/release/qencode-bootstrapper.min.js'></script>
    <div id='player'></div>
    <script>
        qPlayer('player', {
            licenseKey: 'f2234b90-8d26-6b9e-637c-eb62a5e79edb',
            videoSources: { src: "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" }
        });  
    </script>    
</body>
</html>

Initiate player with callback function

Callback function can be used to run some code after player was initiated.

<html>
<head>
  <meta charset='utf-8'>
</head>
<body>
    <script src='https://player-static.qencode.com/release/qencode-bootstrapper.min.js'></script>
    <div id='player'></div>
    <script>
        qPlayer('player', {
            licenseKey: 'f2234b90-8d26-6b9e-637c-eb62a5e79edb',
            videoSources: { src: "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" }
        }, function(){
            console.log("player initiated")
        });   
    </script>    
</body>
</html>

Initiating multiple players on the same page

You can initiate more than 1 player instance on the same page

<html>
<head>
  <meta charset='utf-8'>
</head>
<body>
    <script src='https://player-static.qencode.com/release/qencode-bootstrapper.min.js'></script>

    <div id='player_1'></div>
    <script>
        qPlayer('player_1', {
            licenseKey: 'f2234b90-8d26-6b9e-637c-eb62a5e79edb',
            videoSources: { src: "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" }
        }); 
    </script>  
    
    <div id='player_2'></div>
    <script>
        qPlayer('player_2', {
            licenseKey: 'f2234b90-8d26-6b9e-637c-eb62a5e79edb',
            videoSources: { src: "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd" }
        }); 
    </script>      
</body>
</html>

Adding a Poster Image

You can easily add a poster image to your video player that will be displayed to your viewers before playback begins. Poster images allow you to set a preview image for your video which can come from any custom image you create or even from a thumbnail generated during the encoding process.

"poster": URL of the image to show before playback starts.

The poster param will be added to the player code:

var params = {
  "poster": "https://my-bucket.media-storage.eu-central.qencode.com/poster-image.jpg"
}