├── .gitignore ├── .jshintrc ├── Gruntfile.js ├── LICENSE ├── README.md ├── bower.json ├── build ├── cuepoints.js └── videojs.cuepoints.js ├── dist └── videojs.cuepoints.js ├── package.json └── src ├── core.js └── cuepoint.js /.gitignore: -------------------------------------------------------------------------------- 1 | /.project 2 | /.settings 3 | /.idea 4 | /.vscode 5 | 6 | .s3config.json 7 | *.sample 8 | 9 | node_modules 10 | npm-debug.log 11 | 12 | examples -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "curly" : true, 3 | "eqnull" : true, 4 | "eqeqeq" : true, 5 | "undef" : true, 6 | "predef" : [ 7 | "videojs", 8 | "Cuepoint" 9 | ] 10 | } -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | var pkg, version, verParts; 3 | pkg = grunt.file.readJSON('package.json'); 4 | verParts = pkg.version.split('.'); 5 | version = { 6 | full: pkg.version, 7 | major: verParts[0], 8 | minor: verParts[1], 9 | patch: verParts[2] 10 | }; 11 | version.majorMinor = version.major + '.' + version.minor; 12 | // Project configuration. 13 | grunt.initConfig({ 14 | pkg: pkg, 15 | jshint: { 16 | src: { 17 | src: ['src/*.js'], 18 | options: { 19 | jshintrc: '.jshintrc' 20 | } 21 | } 22 | }, 23 | concat: { 24 | build: { 25 | src: ['src/cuepoint.js','src/core.js'], 26 | dest:'build/<%= pkg.name %>.js' 27 | } 28 | }, 29 | uglify: { 30 | options: { 31 | banner: '/*! <%= pkg.title %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'+ 32 | '/*! See <%=pkg.github_url %> for details */\n'+ 33 | '/*! Author: <%= pkg.author %> <%= pkg.author_email %>*/\n'+ 34 | '/*! Released under the <%= pkg.license %> license */\n' 35 | }, 36 | build: { 37 | src: 'build/<%= pkg.name %>.js', 38 | dest: 'build/<%= pkg.distName %>.js' 39 | }, 40 | dist: { 41 | src: 'build/<%= pkg.name %>.js', 42 | dest: 'dist/<%= pkg.distName %>.js' 43 | } 44 | } 45 | }); 46 | 47 | // Load the plugin that provides the "uglify" task. 48 | grunt.loadNpmTasks('grunt-contrib-uglify'); 49 | grunt.loadNpmTasks('grunt-contrib-concat'); 50 | grunt.loadNpmTasks('grunt-contrib-jshint'); 51 | // Default task(s). 52 | grunt.registerTask('default', ['jshint', 'concat','uglify']); 53 | grunt.registerTask('dist',['jshint', 'concat','uglify:dist']); 54 | }; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 Carlos Galan Cladera 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | 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, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | VideoJS Cuepoints 2 | ================== 3 | ## HTML5 Sync Cuepoints Plugin 4 | 5 | VideoJS Cue Points is a plugin for Video JS player. With this plugin you can 6 | sync actions with the media timeline and make the viewers experiences richer. 7 | 8 | ## Installation 9 | Add videojs.cuepoints.js, just after 10 | videojs: 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | .... 19 | 20 | **Warning!** Hosted version will be removed July 3rd. From now on, in order to use this library clone/download this project and use files in dist/ folder. 21 | 22 | ## Usage 23 | When videojs is ready, initialize the plugin and use the function `addCuepoint` to sync actions 24 | with the timeline: 25 | 26 | 47 | 48 | ## Please, fork me! 49 | I have a lot of things to learn yet (one of them is my English). So, fork me and help me to improve 50 | the project. 51 | Thanks! ;) 52 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "videojs-cuepoints", 3 | "version": "1.1.6", 4 | "homepage": "https://github.com/cladera/videojs-cuepoints", 5 | "authors": [ 6 | "(Carlos Galan Cladera )" 7 | ], 8 | "description": "sync actions with the media timeline", 9 | "main": "dist/videojs.cuepoints.js", 10 | "keywords": [ 11 | "videojs" 12 | ], 13 | "dependencies": { 14 | "video.js": "^4.0.0" 15 | }, 16 | "license": "MIT", 17 | "ignore": [ 18 | "**/.*", 19 | "node_modules", 20 | "bower_components", 21 | "build" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /build/cuepoints.js: -------------------------------------------------------------------------------- 1 | function Cuepoint(player, options) { 2 | this.player = player; 3 | var opts = options || {}; 4 | this.namespace = opts.namespace || ""; 5 | this.start = opts.start || 0; 6 | this.end = opts.end || -1; 7 | this.startFn = opts.onStart || function() {}; 8 | this.endFn = opts.onEnd || function() {}; 9 | this.params = opts.params || {}; 10 | this.fired = false; 11 | } 12 | Cuepoint.prototype._process = function() { 13 | //Check if current time is between start and end 14 | if (this.player.currentTime() >= this.start && (this.end < 0 || this.player.currentTime() < this.end)) { 15 | if (this.fired) { //Do nothing if start has already been called 16 | return; 17 | } 18 | this.fired = true; //Set fired flag to true 19 | this._start(); //Call start function 20 | } else { 21 | if (!this.fired) { //Do nothing if end has already been called 22 | return; 23 | } 24 | this.fired = false; //Set fired flat to false 25 | this._end(); //Call end function 26 | } 27 | }; 28 | 29 | Cuepoint.prototype.start = 0; 30 | 31 | Cuepoint.prototype.end = -1; 32 | 33 | Cuepoint.prototype._start = function() { 34 | this.startFn.call(this, this.params); 35 | }; 36 | 37 | Cuepoint.prototype._end = function() { 38 | this.endFn.call(this, this.params); 39 | }; 40 | 41 | Cuepoint.prototype.activate = function() { 42 | var self = this; 43 | this.processHandler = function() { 44 | self._process(); 45 | }; 46 | this.player.on("timeupdate", this.processHandler); 47 | }; 48 | 49 | Cuepoint.prototype.suspend = function() { 50 | this.fired = false; 51 | var self = this; 52 | this.player.off("timeupdate", this.processHandler); 53 | }; 54 | 55 | Cuepoint.prototype.destroy = function() { 56 | var self = this; 57 | this.player.off("timeupdate", this.processHandler); 58 | }; 59 | 60 | function vjsCuepoints(options) { 61 | var player = this; 62 | player.cuepoints = player.cuepoints || {}; 63 | player.cuepoints.init = function(options) { 64 | player.cuepoints.instances = []; 65 | }; 66 | player.cuepoints.destroy = function() { 67 | var i = 0, 68 | j = player.cuepoints.instances.length; 69 | for (; i < j; i++) { 70 | player.cuepoints.instances[i].destroy(); 71 | player.cuepoints.instances[i] = null; 72 | } 73 | player.cuepoints.instances = null; 74 | }; 75 | player.cuepoints._addCuepoint = function(options) { 76 | var cp = new Cuepoint(player, options); 77 | cp.activate(); 78 | player.cuepoints.instances.push(cp); 79 | return cp; 80 | }; 81 | 82 | 83 | player.addCuepoint = function(options) { 84 | return player.cuepoints._addCuepoint(options); 85 | }; 86 | 87 | player.destroyCuepoints = function() { 88 | return player.cuepoints.destroy(); 89 | }; 90 | 91 | player.cuepoints.init(options); 92 | } 93 | 94 | videojs.plugin('cuepoints', vjsCuepoints); 95 | -------------------------------------------------------------------------------- /build/videojs.cuepoints.js: -------------------------------------------------------------------------------- 1 | /*! VideoJS Cuepoints plugin 2015-11-09 */ 2 | /*! See http://github.com/cladera/videojs-cuepoints for details */ 3 | /*! Author: Carlos Galan Cladera */ 4 | /*! Released under the MIT license */ 5 | function Cuepoint(a,b){this.player=a;var c=b||{};this.namespace=c.namespace||"",this.start=c.start||0,this.end=c.end||-1,this.startFn=c.onStart||function(){},this.endFn=c.onEnd||function(){},this.params=c.params||{},this.fired=!1}function vjsCuepoints(a){var b=this;b.cuepoints=b.cuepoints||{},b.cuepoints.init=function(){b.cuepoints.instances=[]},b.cuepoints.destroy=function(){for(var a=0,c=b.cuepoints.instances.length;c>a;a++)b.cuepoints.instances[a].destroy(),b.cuepoints.instances[a]=null;b.cuepoints.instances=null},b.cuepoints._addCuepoint=function(a){var c=new Cuepoint(b,a);return c.activate(),b.cuepoints.instances.push(c),c},b.addCuepoint=function(a){return b.cuepoints._addCuepoint(a)},b.destroyCuepoints=function(){return b.cuepoints.destroy()},b.cuepoints.init(a)}Cuepoint.prototype._process=function(){if(this.player.currentTime()>=this.start&&(this.end<0||this.player.currentTime() */ 4 | /*! Released under the MIT license */ 5 | function Cuepoint(a,b){this.player=a;var c=b||{};this.namespace=c.namespace||"",this.start=c.start||0,this.end=c.end||-1,this.startFn=c.onStart||function(){},this.endFn=c.onEnd||function(){},this.params=c.params||{},this.fired=!1}function vjsCuepoints(a){var b=this;b.cuepoints=b.cuepoints||{},b.cuepoints.init=function(){b.cuepoints.instances=[]},b.cuepoints.destroy=function(){for(var a=0,c=b.cuepoints.instances.length;c>a;a++)b.cuepoints.instances[a].destroy(),b.cuepoints.instances[a]=null;b.cuepoints.instances=null},b.cuepoints._addCuepoint=function(a){var c=new Cuepoint(b,a);return c.activate(),b.cuepoints.instances.push(c),c},b.addCuepoint=function(a){return b.cuepoints._addCuepoint(a)},b.destroyCuepoints=function(){return b.cuepoints.destroy()},b.cuepoints.init(a)}Cuepoint.prototype._process=function(){if(this.player.currentTime()>=this.start&&(this.end<0||this.player.currentTime()", 7 | "license": "MIT", 8 | "author_url": "www.carlosgalancladera.net", 9 | "github_url": "http://github.com/cladera/videojs-cuepoints", 10 | "devDependencies": { 11 | "grunt": "~0.4.1", 12 | "grunt-contrib-jshint": "~0.6.0", 13 | "grunt-contrib-nodeunit": "~0.2.0", 14 | "grunt-contrib-uglify": "~0.2.2", 15 | "grunt-s3": "~0.2.0-alpha.2", 16 | "grunt-contrib-concat": "~0.3.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/core.js: -------------------------------------------------------------------------------- 1 | function vjsCuepoints(options) { 2 | var player = this; 3 | player.cuepoints = player.cuepoints || {}; 4 | player.cuepoints.init = function(options) { 5 | player.cuepoints.instances = []; 6 | }; 7 | player.cuepoints.destroy = function() { 8 | var i = 0, 9 | j = player.cuepoints.instances.length; 10 | for (; i < j; i++) { 11 | player.cuepoints.instances[i].destroy(); 12 | player.cuepoints.instances[i] = null; 13 | } 14 | player.cuepoints.instances = null; 15 | }; 16 | player.cuepoints._addCuepoint = function(options) { 17 | var cp = new Cuepoint(player, options); 18 | cp.activate(); 19 | player.cuepoints.instances.push(cp); 20 | return cp; 21 | }; 22 | 23 | 24 | player.addCuepoint = function(options) { 25 | return player.cuepoints._addCuepoint(options); 26 | }; 27 | 28 | player.destroyCuepoints = function() { 29 | return player.cuepoints.destroy(); 30 | }; 31 | 32 | player.cuepoints.init(options); 33 | } 34 | 35 | videojs.plugin('cuepoints', vjsCuepoints); 36 | -------------------------------------------------------------------------------- /src/cuepoint.js: -------------------------------------------------------------------------------- 1 | function Cuepoint(player, options) { 2 | this.player = player; 3 | var opts = options || {}; 4 | this.namespace = opts.namespace || ""; 5 | this.start = opts.start || 0; 6 | this.end = opts.end || -1; 7 | this.startFn = opts.onStart || function() {}; 8 | this.endFn = opts.onEnd || function() {}; 9 | this.params = opts.params || {}; 10 | this.fired = false; 11 | } 12 | Cuepoint.prototype._process = function() { 13 | //Check if current time is between start and end 14 | if (this.player.currentTime() >= this.start && (this.end < 0 || this.player.currentTime() < this.end)) { 15 | if (this.fired) { //Do nothing if start has already been called 16 | return; 17 | } 18 | this.fired = true; //Set fired flag to true 19 | this._start(); //Call start function 20 | } else { 21 | if (!this.fired) { //Do nothing if end has already been called 22 | return; 23 | } 24 | this.fired = false; //Set fired flat to false 25 | this._end(); //Call end function 26 | } 27 | }; 28 | 29 | Cuepoint.prototype.start = 0; 30 | 31 | Cuepoint.prototype.end = -1; 32 | 33 | Cuepoint.prototype._start = function() { 34 | this.startFn.call(this, this.params); 35 | }; 36 | 37 | Cuepoint.prototype._end = function() { 38 | this.endFn.call(this, this.params); 39 | }; 40 | 41 | Cuepoint.prototype.activate = function() { 42 | var self = this; 43 | this.processHandler = function() { 44 | self._process(); 45 | }; 46 | this.player.on("timeupdate", this.processHandler); 47 | }; 48 | 49 | Cuepoint.prototype.suspend = function() { 50 | this.fired = false; 51 | var self = this; 52 | this.player.off("timeupdate", this.processHandler); 53 | }; 54 | 55 | Cuepoint.prototype.destroy = function() { 56 | var self = this; 57 | this.player.off("timeupdate", this.processHandler); 58 | }; 59 | --------------------------------------------------------------------------------