February 04, 2018

Add Custom Media Player to Website

This is going to be a short post just to show you how can you add a custom media player to your website using "jQuery Video Extend". There are a lot of media libraries available but we will be using jQuery Video Extend.

Add Custom Media Player to Website
Demo Download

You will need following for this setup:

jQuery Video Extend is a jQuery plugin which extends HTML5 video player with some additional features like,Your own logo over on video frame, Custom markers and onPlay and onPause callback functions. It is easy to integrate you just need to add HTML5 video player and extend it with jQuery Video Extend.


index.html 

<html>
    <head>
        <title>Demo Video Extend jQuery</title>
        <script src="video-extend/js/jquery-3.1.1.min.js" type="text/javascript"></script>
        <script src="video-extend/js/jquery.video-extend.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="main-container">
            <video controls="" id="video">
                <source src="https://www.youtube.com/watch?v=ag0hHhSrdUo" type="video/youtube"></source>
            </video>
        </div>
    </body>
 </html>

javascript.js 

$(document).ready(function () {
    //------------------ For MP4/Youtube Videos ------------------//
    $('#video').videoExtend({
        logo: 'path-to-logo/example_logo.png',
        logoLink: 'url_to_website',
        logoSize: [ 60, 40 ],
        logoPosition: [ 'auto', 10, 50, 'auto' ] // top, right, bottom, left
    });

    //------------------ For FLV Videos ------------------//
    $('#video').videoExtend({
        logo: 'path-to-logo/example_logo.png',
        logoLink: 'url_to_website',
        logoSize: [ 60, 40 ],
        logoPosition: [ 'auto', 10, 50, 'auto' ], // top, right, bottom, left
        swfPath: 'swf/video-js.swf',
        textPlay: 'Play movie'
    });
});

style.css: 

*{
    box-sizing: border-box;
}
html,body{
    margin: 0px;
    padding: 0px;
}
body{
    background: #f0f0f0;
}
.main-container{
    max-width: 1024px;
    margin: 0px auto;
}
#video{
    max-width: 500px;
    max-height: 500px;
    width: 500px;
    height: auto;
    margin: 0px auto !important;
}
Home