EMP Html5 Player 2 Tutorial: Add custom button

You can easily add a custom button and customize your control bar.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link href="video-js/video-js.css" rel="stylesheet">
    <link href="css/emp-player.css" rel="stylesheet">
    <script src="emp/js/emp-player-all.js"></script>
    <script>
        /* Add a custom button */
        var Button = empPlayer.getComponent('Button');
        var MyPreviousButton = empPlayer.extend(Button, {
            constructor: function() {
                Button.apply(this, arguments);
                /* initialize your button */
                this.controlText('My Previous button');
                /* add event listners */
                this.on(this.player(), 'playing', () => this.updateShowing());
            },
            buildCSSClass() {
                /* add your style class */
                return "emp-previous-control vjs-control vjs-button";
            },
            handleClick: function() {
                /* do something on click,
                 * you have access to the player e.g this.player().currentAsset()
                 */
                alert("Click MyPreviousButton : " + this.player().currentTime());
            },
            updateShowing() {
                /* Hide or show your button
                 * this.hide();
                 * this.show();
                 */
                console.log('updateShowing');
            }
        });
        empPlayer.registerComponent('MyPreviousButton', MyPreviousButton);
        function initPlayer() {
            var options = { autoplay: 'any' };
            /* customize your controlBar */
            options['controlBar'] = {
                'volumePanel': {
                    'inline': true,
                },
                'chromeCastButton': {
                    'appId': 'YOUR Receiver App-Id'
                },
                'empTimeDisplay': {
                    'mode': 'currentTime'
                },
                'empTimeDisplay2': {
                    'mode': 'remainingTime'
                },
                children: [
                    'empPlayToggle',
                    'empReloadButton',
                    'empStopButton',
                    'myPreviousButton', // Your custom button
                    //'empPreviousButton', Remove a button
                    'empRewindButton',
                    'empForwardButton',
                    'empNextButton',
                    'empLiveDisplay',
                    'volumePanel',
                    'empTimeDisplay',
                    'timeDivider',
                    'durationDisplay',
                    'progressControl',
                    'empTimeDisplay2',
                    'customControlSpacer',
                    'empRestartButton',
                    'playbackRateMenuButton',
                    'chaptersButton',
                    'bitrateButton',
                    'audioTrackButton',
                    'subsCapsButton',
                    'playlistButton',
                    'airplayToggle',
                    'fullscreenToggle'
                ]
            };
            demoPlayer = new empPlayer('#video', options);
        }
    </script>
</head>
<body onload="initPlayer();">
    <video id="video" controls width="640" height="264" class="video-js vjs-16-9 vjs-default-skin vjs-big-play-centered">
        <source src="https://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.mpd" type="application/dash+xml">
    </video>
</body>
</html>

Default Cascading Style Sheets for emp-previous-control

.video-js .emp-previous-control {
  cursor: pointer;
  -webkit-box-flex: none;
  -moz-box-flex: none;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none; }

.video-js.vjs-ended .emp-previous-control {
  display: none; }

.emp-icon-previous, .video-js .emp-previous-control {
  font-family: EMPIcons;
  font-weight: normal;
  font-style: normal; }
  .emp-icon-previous:before, .video-js .emp-previous-control:before {
    content: "\f106";
    font-size: 1.8em;
    line-height: 1.67; }

EMP Icons

restart unicode="\f101;"
rewind unicode="\f102;"
forward unicode="\f103;"
chromecast unicode="\f104;"
next unicode="\f105;"
previous unicode="\f106;"
bitrate unicode="\f107;"
pip unicode="\f108;"
airplay unicode="\e900;"

Videojs icons

Search results