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 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 initializer.


index.html 

<!DOCTYPE html>
<html>
    <head>
        <title>Add Custom Media Player with Jquery Video Extend - Demo</title>
        <script type="text/javascript" src="video-extend/js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="video-extend/js/jquery.video-extend.js"></script>
    </head>
    <body>
        <div class="container">
            <video class="video" controls>
                <source src="https://www.youtube.com/watch?v=ag0hHhSrdUo" type="video/youtube">
            </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: 0;
	padding: 0;
}
body{
	background: #f6f6f6;
	font-family: "Segoe UI", "Roboto", "Helvetica", sans-serif;
	font-size: 15px;
	font-weight: normal;
	font-style: normal;
}
.container {
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}
.video{
	width: 100%;
	height: auto;
}
Home