├── .gitignore ├── LICENSE ├── README.md ├── img └── example_logo.png ├── index.html ├── js └── jquery.video-extend.js └── swf └── video-js.swf /.gitignore: -------------------------------------------------------------------------------- 1 | /js/jquery-3.1.1.min.js 2 | /video/Sintel.mp4 3 | /video/Sintel.flv 4 | /video/Sintel_poster.png 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 andchir 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jQuery Video Extend 2 | HTML5 Video Extend 3 | 4 | * Adding a logo. 5 | * Adding markers with labels. 6 | * Playing YouTube video. 7 | * Playing FLV video (basic support). 8 | * Simply make responsive. 9 | 10 |  11 | 12 | [Wiki](https://github.com/andchir/jquery-video-extend/wiki) 13 | 14 | [Demo](http://andchir.github.io/jquery-video-extend/) 15 | 16 | ``` html 17 | 18 | 19 | ``` 20 | 21 | ``` html 22 | 51 | ``` 52 | 53 | ``` html 54 | 57 | ``` 58 | 59 | ### Another way: 60 | 61 | ``` html 62 | 65 | ``` 66 | Any parameters can be specified by a prefix "data-". The array must be JSON string. 67 | -------------------------------------------------------------------------------- /img/example_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andchir/jquery-video-extend/b85dc4e4e5bba4b3515e92d12cc6914c76fba753/img/example_logo.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 |<script src="js/jquery-3.1.1.min.js"></script> 80 | <script src="js/jquery.video-extend.js"></script>81 | 82 |
<script> 89 | $(document).ready(function(){ 90 | 91 | $('#video1').videoExtend({ 92 | logo: 'img/example_logo.png', 93 | logoLink: 'http://example.com/', 94 | logoSize: [ 60, 40 ], 95 | markers: [ 96 | { 97 | time: 39,// seconds 98 | text: 'Chapter 1' 99 | }, 100 | { 101 | time: 350, 102 | text: 'Chapter 2' 103 | }, 104 | { 105 | time: 470, 106 | text: 'Chapter 3' 107 | }, 108 | { 109 | time: 677, 110 | text: 'Chapter 4' 111 | } 112 | ] 113 | }); 114 | 115 | }); 116 | </script> 117 | <video id="video1" width="640" height="360" poster="video/Sintel_poster.png" controls> 118 | <source src="video/Sintel.mp4" type="video/mp4"> 119 | </video>120 | 121 |
<video width="640" height="360" data-logo="img/example_logo.png" data-markers='[{"time":39,"text":"Chapter 1"},{"time":350,"text":"Chapter 2"}]'> 124 | <source src="video/Sintel.mp4" type="video/mp4"> 125 | </video>126 | 127 |
Any parameters can be specified by a prefix "data-". The array must be JSON string.
128 | 129 |<script> 136 | $(document).ready(function(){ 137 | 138 | $('#video2').videoExtend({ 139 | logo: 'img/example_logo.png', 140 | logoLink: 'http://example.com/', 141 | logoSize: [ 60, 40 ], 142 | logoPosition: [ 'auto', 10, 50, 'auto' ] // top, right, bottom, left 143 | }); 144 | 145 | }); 146 | </script> 147 | <video id="video2" width="640" height="360" controls> 148 | <source src="https://www.youtube.com/watch?v=eRsGyueVLvQ" type="video/youtube"> 149 | </video>150 | 151 |
<script> 158 | $(document).ready(function(){ 159 | 160 | $('video.video-extend').videoExtend({ 161 | logo: 'img/example_logo.png', 162 | logoLink: 'http://example.com/', 163 | logoSize: [ 60, 40 ], 164 | swfPath: 'swf/video-js.swf', 165 | textPlay: 'Play movie' 166 | }); 167 | 168 | }); 169 | </script> 170 | <video class="video-extend" width="640" height="360" poster="video/Sintel_poster.png" controls> 171 | <source src="video/Sintel.flv" type="video/flv"> 172 | </video>173 | 174 |
<script> 177 | $('#video1').get(0).play();// Play video 178 | </script>179 | 180 | http://www.w3.org/2010/05/video/mediaevents.html 181 | 182 |