# 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: 'video/Sintel.mp4',
                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/mp4">
    </video>

### API

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

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