HTML5 Video Extend

jQuery plugin

• Adding a logo.
• Adding markers with labels.
• Playing YouTube video.
• Playing FLV video (basic support).
• Simply make responsive.

<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,// seconds
                    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:

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

Any parameters can be specified by a prefix "data-". The array must be JSON string.

Play YouTube video

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

Play FLV video (basic support)

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

API

<script>
    $('#video1').get(0).play();// Play video
</script>

http://www.w3.org/2010/05/video/mediaevents.html