THEOplayer 2.X Demo: Adding buttons and text to the default UI

This page demonstrates how you can manipulate the default THEOplayer UI, using CSS, JavaScript and THEOplayer API. We have three objectives in this demo:

  • Inserting a button
  • Attaching custom logic to this button
  • Overlaying text

The button is added to the control bar. When this button is clicked, an overlay container appears over the player. This container is closable in turn.
The overlay text appear in the top left corner.

The result:

Big Buck Bunny

The HTML code:


<div id="video-container" class="video-js theoplayer-skin theo-seekbar-above-controls">
    <div class="custom-title">Big Buck Bunny</div>
    	<div class="theoplayer-overlay-element-container hidden">
			<div class="overlay-container">
			<div>
				<div class="overlay-item">Lorem ipsum</div>
			</div>
			<div>
				<div class="overlay-item">Lorem ipsum</div>
			</div>
			<div>
				<div class="overlay-item">Lorem ipsum</div>
			</div>
			<div>
				<div class="overlay-item">Lorem ipsum</div>
			</div>
			<div>
				<div class="overlay-item">Lorem ipsum</div>
			</div>
			<div>
				<div class="overlay-item">Lorem ipsum</div>
			</div>
		</div>
	</div>
</div><  
    

The JavaScript code:

// information on setting up THEOplayer and the player object can be found at https://support.theoplayer.com/hc/en-us/articles/115001933305

var element, player;

window.onload = function () {
    var elementContainer = document.querySelector('.theoplayer-overlay-element-container');
    
    // setting up the player
    element = document.querySelector('#video-container');
    player = new THEOplayer.Player(element, {
        libraryLocation : 'http://cdn.theoplayer.com/dash/theoplayer/',
        ui: {
            fluid: true
        }
    });
    
    // settings the source
    player.source = {
        sources: [{
            src : '//cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny_metadata.m3u8',
             type : 'application/x-mpegurl',
        }]
    };
    
    // setting up the custom icon by setting up a video-js component
    var Button = THEOplayer.videojs.getComponent('Button');
    var MyButton = THEOplayer.videojs.extend(Button, {
      constructor: function() {
        Button.apply(this, arguments); // required
        
        /* Extra after initializing your button */
        
        // add tooltip
        var tooltipSpan = document.createElement('span');
        tooltipSpan.className = 'theo-button-tooltip vjs-hidden';
        tooltipSpan.innerText = 'Info';
        function toggleTooltip() {
            tooltipSpan.classList.toggle('vjs-hidden');
        }
        this.el().addEventListener('mouseover', toggleTooltip);
        this.el().addEventListener('mouseout', toggleTooltip);
        this.el().appendChild(tooltipSpan);
        
      },
      handleClick: function() {
        elementContainer.classList.toggle('hidden');
      },
      buildCSSClass: function () {
        return 'fa fa-info custom-info-icon vjs-control vjs-button'; // insert all class names here
      }
    });

    THEOplayer.videojs.registerComponent('MyButton', MyButton);
    player.ui.getChild('controlBar').addChild('myButton', {});
    
    // setting up the close button
    var closeBtn = document.createElement('div');
    closeBtn.classList.add('close-btn');
    closeBtn.textContent = 'X';
    closeBtn.addEventListener('mousedown', function () {
        elementContainer.classList.toggle('hidden');
    });
    elementContainer.appendChild(closeBtn);
}
// code

The CSS code:

 .hidden {
        display: none;
    }
    
    .custom-info-icon {
        cursor: pointer;
    }
    
    .theoplayer-overlay-element-container {
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 30px;
        background-color: rgba(21, 21, 21, 0.85);
        z-index: 11;
    }
    
    .overlay-item {
        width: 33.33%;
        float: left;
        position: relative;
        padding-bottom: 40px;
    }
    
    .close-btn {
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 1.5em;
        color: white;
        z-index: 12;
        cursor: pointer;
        font-weight: bold;
    }
    
    /*
        hidden by default
    */
    
    .custom-title {
        display: none;
    }
    
    /*
        unless player has started
    */
    
    .theoplayer-skin.vjs-has-started .custom-title {
        display: block;
        position: absolute;
        top: 10px;
        left: 10px;
    }