Sign In

Newsletter

Subscribe to our newsletter to stay updated about Blue Billywig and all advancements regarding online video.

Sign In

Header image for Skinning the Blue Billywig player #3: Adapt screens

Skinning the Blue Billywig player #3: Adapt screens

Posted on March 14, 2016


Tags: html, javascript, user interface, video player

In part 1, we created our custom skin and added basic controls. In part 2, we added more advanced controls to further improve the user experience. In part 3, we will further improve our custom skin with a start- and end screen. The start screen will contain the media clip title and a big play button. The end screen will contain a replay button and a button to continue to the next video. Finally, we will add a full screen button which allows the video to be played in glorious full screen.

A working example can be found here, the source code can be found here, and an overview of the complete tutorial can be found here.

A bigger play button

A better user experience starts with obvious controls. What is the first thing that the user probably wants to do when he sees your video? Play the video of course! A very big, bold button with a play icon provides this interface in a no-nonsense manner. And the best thing is? It only takes a few lines of code to implement this feature:

<div class="big-play">
        <i class="fa fa-play"></i>
</div>

Just like with the regular button, we use CSS to show and hide the play button:

.big-play {
    display: block;
}
#player.playing .big-play {
        display: none;
}
#player.paused .big-play {
        display: none;
}

This requires only a single line of JavaScript, since we already have a play function for the regular play button.

myPlayer.init = function(targetContainer){
        ..
        this.$container.find('.big-play').on('click', $.proxy(this.play,this));
        ..     
}

The replay button

The regular play button already acts as a replay button when the video has ended, because of the way the Blue Billywig player behaves. So the only thing left to do is adding an 'ended' class to our skin container, just like the 'playing' and 'paused' class. To make things easier to maintain, we introduce a variable that contains all classes that indicate the state, for easy removal.

myPlayer.init = function(targetContainer){
        ..
        this.states = 'playing paused ended';
        ..
        this.api.on('ended', $.proxy(this.onEnded, this));
        this.$controlbar.find('.replay.button').on('click', $.proxy(this.play,this));
        ..     
}
 
myPlayer.onEnded = function(){
        this.$container.removeClass(this.states).addClass('ended');
};

 

<div class="replay button">
        <i class="fa fa-repeat"></i>
</div>

 

#player.ended .replay.button {
        display: block;
}
#player.ended .play.button {
        display: none;
}

Playing the next video

Since we don't want users to leave our page right away, we offer them the possibility to view another video. The player API throws an event when the related clips have been loaded (relatedclipschange), so we use that to get our next video (if there is one available):

myPlayer.init = function(targetContainer){
        ..
        this.relatedClips = null;
        ..
        this.api.on('relatedclipschange', $.proxy(this.onRelatedClipsChange,this));
        ..
}
 
myPlayer.onRelatedClipsChange = function(){
        this.relatedClips = this.api.getRelatedClips();
};

Next up, the play next button itself:

<div class="play-next">
        <i class="fa fa-step-forward"></i>
        Play next
</div>
play-next {
        display: none;
}
#player.ended .play-next {
        display: block;
}
myPlayer.init = function(targetContainer){
        ..
        this.$container.find('.play-next').on('click', $.proxy(this.playNext,this));
        ..
}
 
myPlayer.playNext = function(){
        if(this.relatedClips != null && typeof this.relatedClip[0] !=undefined){
                var nextClipId = this.relatedClips[0].id;
                this.api.load({'clipId': nextClipId});
        } else {
                this.$container.find('.play-next').hide();
        }
};

As you can see, we make sure to hide the "play next" button when our next clip is not available for some reason. It is possible to select a specific clip to play next, by replacing the nextClipIdvariable, or adjust the related cliplist in the Blue Billywig Online Video Platform.

Behold, the glory of fullscreen!

Fullscreen functionality might be one of the biggest user experience improvements in the player. For the sake of simplicity, we will only build a native fullscreen function. For better compatibility, we advice you to include a 'browser fullscreen'.

<div class="fullscreen button">
        <i class="fa fa-expand"></i>
</div>

 

myPlayer.init = function(targetContainer){
        ..
        this.fullscreen = false;
        ..
        this.$controlbar.find('.fullscreen.button').on('click',$.proxy(this.toggleFullscreen, this));
        ..
}
 
myPlayer.toggleFullscreen = function(){
        if(!this.fullscreen){
                this.enableFullscreen();
        } else {
                this.disableFullscreen();
        }
};
 
myPlayer.enableFullscreen = function(){
        if (this.$container[0].requestFullscreen) {
                this.$container[0].requestFullscreen();
        } else if (this.$container[0].msRequestFullscreen) {
                this.$container[0].msRequestFullscreen();
        } else if (this.$container[0].mozRequestFullScreen) {
                this.$container[0].mozRequestFullScreen();
        } else if (this.$container[0].webkitRequestFullscreen) {
                this.$container[0].webkitRequestFullscreen();
        }      
};
 
myPlayer.disableFullscreen = function(){
        if (document.exitFullscreen) {
                document.exitFullscreen();
        } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
        }
};

This correctly enables fullscreen functionality. But the icon remains the same, and we want to make sure that we know that the user has exited fullscreen, even if he uses the browser default functionality like ESC.

myPlayer.fullscreenChange = function(ev){
        if((document.fullscreenElement || document.mozFullScreenElement ||document.webkitFullscreenElement) == null){
                this.$container.removeClass('fullscreen');
                this.fullscreen = false;
        } else {
                this.$container.addClass('fullscreen');
                this.fullscreen = true;
        }
};
.fullscreen.button .fa-compress {
        display: none;
}
#player.fullscreen .fullscreen.button .fa-expand {
        display: none;
}
#player.fullscreen .fullscreen.button .fa-compress {
        display: block;
}

As you can see, the player retains its original size, so we need to stretch it to fit the whole screen:

#player.fullscreen {
        width: 100%;
        height: 100%;
}

Wrapping up

In the past three tutorials, we have created a custom skin on top of the Blue Billywig player. Basic controls like play, pause, volume adjustments, and more advanced controls like seeking, quality selection and fullscreen. The custom skin that we created in the tutorial is only an example of what is possible with the Blue Billywig player, and many more improvements can be made.

Building a feature complete skin that works like users expect it to work, might take more work than you would imagine at first. Luckily, the Blue Billywig default skin is often sufficient in terms of functionality and customisability. But when you do require a tailor made design, this tutorial should give you a head start at building your own skin.

Author Blog author avatar

Blue Billywig


Author Blog author avatar

Blue Billywig



Other blog posts you might like...

Stay Updated

Sign up for our newsletter to stay updated on product updates and the latest developments in online video.

 

We use cookies to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services. You consent to our cookies if you continue to use our website. Read moreOK