jQuery Video Extend - extending the capabilities of HTML5 video player

I often see that site owners and developers use video players like VideoJS , Flowplayer , Uppod , etc., but very rarely I see standard HTML5 players on websites. It seems strange to me, because the usual players in browsers also look very nice. What is the standard "browser" video player:

1. Stylish design. Depends on the browser, but everywhere at a good level.
2. Support for the most popular format - Mpeg4 (H.264) (Chrome, Firefox, IE, Safari, Opera).
3. Very handy API - http://www.w3.org/2010/05/video/mediaevents.html
4. Fast work and support for mobile devices.

Why are these players are not popular? Here is a list of possible reasons:

1. There is no easy way to add your logo.
2. There is no support for FLV video, which is often found.
3. There is no possibility to put tags on the video and create your own extensions.
4. There is no possibility to change the appearance and style of the player.

The last item is the most difficult, but quite rarely this opportunity is used on the players, which I wrote about at the beginning. The first standard theme is used more often. I decided to complete the first three points by writing a jQuery plugin, so Video Extend appeared.



')

Connecting jQuery and plugin:

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

Player with logo and markers:

 <script> $(document).bind('ready',function(){ $('#video1').videoExtend({ logo: 'img/example_logo.png',//   logoLink: 'http://example.com/',//    logoSize: [ 60, 40 ],//   -    markers: [ { time: 39,//  text: 'Chapter 1' }, { time: 350, text: 'Chapter 2' }, { time: 470, text: 'Chapter 3' }, { time: 677, text: 'Chapter 4' } ] }); }); </script> <video id="video1" width="640" height="360" poster="video/Sintel_poster.png" controls> <source src="video/Sintel.mp4" type="video/mp4"> </video> 

Another way:

 <script> $(document).bind('ready',function(){ $('video').videoExtend(); }); </script> <video width="640" height="360" data-logo="img/example_logo.png" data-markers='[{"time":39,"text":"Chapter 1"},{"time":350,"text":"Chapter 2"}]'> <source src="video/Sintel.mp4" type="video/mp4"> </video> 

Parameters can be set through attributes with the prefix "data-".



Playing YouTube videos:

 <script> $(document).bind('ready',function(){ $('#video2').videoExtend({ logo: 'img/example_logo.png', logoLink: 'http://example.com/', logoSize: [ 60, 40 ], logoPosition: [ 'auto', 10, 50, 'auto' ] //   - , , ,  }); }); </script> <video id="video2" width="640" height="360" controls> <source src="https://www.youtube.com/watch?v=eRsGyueVLvQ" type="video/youtube"> </video> 

Playing FLV video (basic support only):

 <script> $(document).bind('ready',function(){ $('video.video-extend').videoExtend({ logo: 'img/example_logo.png', logoLink: 'http://example.com/', logoSize: [ 60, 40 ], swfPath: 'swf/video-js.swf', textPlay: 'Play movie' }); }); </script> <video class="video-extend" width="640" height="360" poster="video/Sintel_poster.png" controls> <source src="video/Sintel.flv" type="video/flv"> </video> 

SWF, which plays FLV video, taken from VideoJS .



API usage example:

 $('#video1').get(0).play();//  

I would be glad if someone come in handy.



Demo | Brief documentation | Source