jQuery Plugin To Extend Html5 Video Player - Video Extend

Video Extend is a flexible and robust jQuery plugin to extend the default Html5 video player with the following features:

• Responsive video.
• Custom video logo.
• Custom markers with labels.
• Allows to play Youtube or SWF videos.
• onPlay and onPause callback functions.

Basic usage:

1. Download the jQuery video extend plugin and include the jquery.video-extend.js script after jQuery library is loaded.

<script src="js/jquery.min.js"></script>
<script src="js/jquery.video-extend.js"></script>

2. Download the jQuery video extend plugin and include the jquery.video-extend.js script after jQuery library is loaded.

<script src="js/jquery.min.js"></script>
<script src="js/jquery.video-extend.js"></script>

3. Add an Html5 video to your web page as follow.

<video id="demo" width="640" height="360" poster="poster.png" controls>
  <source src="sample.mp4" type="video/mp4">
</video>

4. Add an Html5 video to your web page as follow.

<video id="demo" width="640" height="360" poster="poster.png" controls>
  <source src="sample.mp4" type="video/mp4">
</video>

5. Customize the video player.

$('#demo').videoExtend({

  // background color
  backgroundColor: '#000',

  // the path to your logo file
  logo: '',

  // logo link
  logoLink: '',

  // width, height
  logoSize: [ 50, 50 ], 

  // top, right, bottom, left
  logoPosition: [ 10, 10, 'auto', 'auto' ], 

  // auto hide logo on play
  logoAutoHide: true,

  // enable responsive
  responsive: true,

  // align center
  alignCenter: true,

  // custom markers with labels.
  // e.g.
  // markers: [{
  //  time: 39.32,// seconds
  //  text: 'Chapter 1'
  // }]
  markers: [],

  // for flv player
  swfPath: 'swf/video-js.swf',

  // autoplay on page load
  autoPlay: false,

  // play text
  textPlay: 'Play video',

  // callbacks
  onPlay: null,
  onPause: null

});

Change log:

2017-03-20

• Correction for browsers support

2017-01-27

• jQuery 3.x support

2015-08-08

• fix for playing FLV if relative link

---

This awesome jQuery plugin is developed by andchir. For more Advanced Usages, please check the demo page or visit the official website.