HTML5 Video Extend
Switch branches/tags
Nothing to show
Clone or download
andchir Merge pull request #6 from bryant1410/master
Fix broken headings in Markdown files
Latest commit b85dc4e Apr 18, 2017
Permalink
Failed to load latest commit information.
img first commit Aug 11, 2015
js Correction for browsers support Mar 19, 2017
swf first commit Aug 11, 2015
.gitignore jQuery 3.x support Jan 26, 2017
LICENSE Initial commit Aug 11, 2015
README.md Fix broken Markdown headings Apr 17, 2017
index.html jQuery 3.x support Jan 26, 2017

README.md

jQuery Video Extend

HTML5 Video Extend

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

Wiki

Demo

<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery.video-extend.js"></script>
<script>
$(document).bind('ready',function(){
    
    $('#video1').videoExtend({
        logo: 'img/example_logo.png',
        logoLink: 'http://example.com/',
        logoSize: [ 60, 40 ],
        markers: [
            {
                time: 39.32,// seconds
                text: 'Chapter 1'
            },
            {
                time: 350.23,
                text: 'Chapter 2'
            },
            {
                time: 470.88,
                text: 'Chapter 3'
            },
            {
                time: 677.82,
                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.