Saturday, February 3, 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 players available but jQuery Video Extend seems to be light and fast.

Add Custom Media Player to Website
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


    
        Demo Video Extend jQuery
        
        
    
    
        

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;
}