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.
You will need following for this setup:
jQuery Video Extend Plugin Download Video Extend
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.
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;
}