diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..e717f5e --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +# http://editorconfig.org +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..9141dd6 --- /dev/null +++ b/.jshintrc @@ -0,0 +1,11 @@ +{ + "browser" : true, + "curly": true, + "eqeqeq": true, + "quotmark" : "single", + "trailing" : true, + "undef" : true, + "predef" : [ + "videojs" + ] +} diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..6c17f82 --- /dev/null +++ b/.npmignore @@ -0,0 +1,3 @@ +dist/ +test/ +*~ \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..89a9142 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,84 @@ +'use strict'; + +module.exports = function(grunt) { + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + + '<%= grunt.template.today("yyyy-mm-dd") %>\n' + + '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author %>;' + + ' Licensed <%= pkg.license %> */\n', + clean: { + files: ['dist'] + }, + concat: { + options: { + banner: '<%= banner %>', + stripBanners: true + }, + dist: { + src: 'lib/**/*.js', + dest: 'dist/<%= pkg.name %>.js' + } + }, + uglify: { + options: { + banner: '<%= banner %>' + }, + dist: { + src: '<%= concat.dist.dest %>', + dest: 'dist/<%= pkg.name %>.min.js' + } + }, + qunit: { + files: 'test/**/*.html' + }, + jshint: { + gruntfile: { + options: { + node: true + }, + src: 'Gruntfile.js' + }, + src: { + options: { + jshintrc: '.jshintrc' + }, + src: ['lib/**/*.js'] + }, + test: { + options: { + jshintrc: '.jshintrc' + }, + src: ['test/**/*.js'] + } + }, + watch: { + gruntfile: { + files: '<%= jshint.gruntfile.src %>', + tasks: ['jshint:gruntfile'] + }, + src: { + files: '<%= jshint.src.src %>', + tasks: ['jshint:src', 'qunit'] + }, + test: { + files: '<%= jshint.test.src %>', + tasks: ['jshint:test', 'qunit'] + } + } + }); + + grunt.loadNpmTasks('grunt-contrib-clean'); + grunt.loadNpmTasks('grunt-contrib-concat'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-qunit'); + grunt.loadNpmTasks('grunt-contrib-jshint'); + grunt.loadNpmTasks('grunt-contrib-watch'); + + grunt.registerTask('default', + ['clean', + 'jshint', + 'qunit', + 'concat', + 'uglify']); +}; diff --git a/LICENSE-Apache-2.0 b/LICENSE-Apache-2.0 new file mode 100644 index 0000000..2c2268c --- /dev/null +++ b/LICENSE-Apache-2.0 @@ -0,0 +1,13 @@ +Copyright 2013 Kasper Moskwiak + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..0f308f8 --- /dev/null +++ b/README.md @@ -0,0 +1,33 @@ +# Video.js Test + +A revolutionary plugin for video.js + +## Getting Started + +Once you've added the plugin script to your page, you can use it with any video: + +```html + + + +``` + +There's also a [working example](example.html) of the plugin you can check out if you're having trouble. + +## Documentation +### Plugin Options + +You may pass in an options object to the plugin upon initialization. This +object may contain any of the following properties: + +#### option +Type: `boolean` +Default: true + +An example boolean option that has no effect. + +## Release History + + - 0.1.0: Initial release diff --git a/example.html b/example.html new file mode 100644 index 0000000..a9422b5 --- /dev/null +++ b/example.html @@ -0,0 +1,68 @@ + + + + + Video.js Resolution Switcher + + + + + + +
+

+ You can see the Video.js Test plugin in action below. + Look at the source of this page to see how to use it with your videos. +

+
+ + + + + + + + diff --git a/lib/videojs-resolution-switcher.css b/lib/videojs-resolution-switcher.css new file mode 100644 index 0000000..4e42057 --- /dev/null +++ b/lib/videojs-resolution-switcher.css @@ -0,0 +1,16 @@ +.vjs-resolution-button { + color: #ccc; + font-family: VideoJS +} + +.vjs-resolution-button:before { + content: '\f110' +} + +.vjs-resolution-button ul.vjs-menu-content { + width: 4em !important; +} + +.vjs-resolution-button .vjs-menu { + left: 0; +} diff --git a/lib/videojs-resolution-switcher.js b/lib/videojs-resolution-switcher.js new file mode 100644 index 0000000..d5743d4 --- /dev/null +++ b/lib/videojs-resolution-switcher.js @@ -0,0 +1,104 @@ +/*! videojs-resolution-switcher - v0.0.0 - 2015-7-26 + * Copyright (c) 2015 Kasper Moskwiak + * Licensed under the Apache-2.0 license. */ +(function(window, videojs) { + 'use strict'; + + var defaults = { + option: true + }, + videoJsResolutionSwitcher; + + /** + * Initialize the plugin. + * @param options (optional) {object} configuration for the plugin + */ + videoJsResolutionSwitcher = function(options) { + var settings = videojs.mergeOptions(defaults, options), + player = this; + + /* + * Resolution menu item + */ + var MenuItem = videojs.getComponent('MenuItem') + var ResolutionMenuItem = videojs.extends(MenuItem, { + constructor: function(player, options){ + + MenuItem.call(this, player, options); + this.src = options.src; + this.type = options.type; + + this.on('click', this.onClick) + }, + onClick: function(){ + // Hide bigPlayButton + player.bigPlayButton.hide() + + // Remember player state + var currentTime = player.currentTime() + var isPaused = player.paused() + + // Change player source and wait for loadedmetadata event, then play video + player.src({src: this.src, type: this.type}).one( 'loadedmetadata', function() { + player.currentTime(currentTime) + + if(!isPaused){ + player.play() + } + player.trigger('resolutionchange') + }) + } + }) + + + /* + * Resolution menu button + */ + var MenuButton = videojs.getComponent('MenuButton') + var ResolutionMenuButton = videojs.extends(MenuButton, { + constructor: function(player, options){ + this.sources = options.sources; + + MenuButton.call(this, player, options); + + this.controlText('Quality') + + }, + createItems: function(){ + + var sources = this.sources; + var menuItems = []; + + for(var i = 0; i < sources.length; i++){ + menuItems.push(new ResolutionMenuItem(player, { + label: sources[i].label, + src: sources[i].src, + type: sources[i].type + })) + } + + return menuItems; + } + }) + + + player.newVideoSources = function(src){ + + // Dispose old resolution menu button before adding new sources + if(player.controlBar.resolutionSwitcher){ + player.controlBar.resolutionSwitcher.dispose() + delete player.controlBar.resolutionSwitcher + } + var menuButton = new ResolutionMenuButton(player, { sources: src }); + menuButton.el().classList.add('vjs-resolution-button') + player.controlBar.resolutionSwitcher = player.controlBar.addChild(menuButton) + + player.src(src); + } + + + }; + + // register the plugin + videojs.plugin('videoJsResolutionSwitcher', videoJsResolutionSwitcher); +})(window, window.videojs); diff --git a/package.json b/package.json new file mode 100644 index 0000000..0bee389 --- /dev/null +++ b/package.json @@ -0,0 +1,29 @@ +{ + "name": "videojs-test", + "version": "0.0.0", + "author": "Kasper Moskwiak", + "description": "A revolutionary plugin for video.js", + "license": "Apache-2.0", + "keywords": [ + "videojs", + "html5", + "flash", + "video", + "player" + ], + "dependencies": {}, + "devDependencies": { + "grunt-contrib-clean": "^0.4", + "grunt-contrib-concat": "^0.3", + "grunt-contrib-jshint": "^0.6", + "grunt-contrib-qunit": "^0.2", + "grunt-contrib-uglify": "^0.2", + "grunt-contrib-watch": "^0.4", + + "video.js": "^5.0.0-rc.29", + "qunitjs": "^1.12" + }, + "peerDependencies": { + "video.js": "^5.0.0-rc.29" + } +} diff --git a/test/index.html b/test/index.html new file mode 100644 index 0000000..4b7ff43 --- /dev/null +++ b/test/index.html @@ -0,0 +1,21 @@ + + + + + Video.js Test + + + +
+
+ + + + + + + diff --git a/test/videojs-resolution-switcher.test.js b/test/videojs-resolution-switcher.test.js new file mode 100644 index 0000000..32169e7 --- /dev/null +++ b/test/videojs-resolution-switcher.test.js @@ -0,0 +1,57 @@ +/*! videojs-test - v0.0.0 - 2015-7-26 + * Copyright (c) 2015 Kasper Moskwiak + * Licensed under the Apache-2.0 license. */ +(function(window, videojs, qunit) { + 'use strict'; + + var realIsHtmlSupported, + player, + + // local QUnit aliases + // http://api.qunitjs.com/ + + // module(name, {[setup][ ,teardown]}) + module = qunit.module, + // test(name, callback) + test = qunit.test, + // ok(value, [message]) + ok = qunit.ok, + // equal(actual, expected, [message]) + equal = qunit.equal, + // strictEqual(actual, expected, [message]) + strictEqual = qunit.strictEqual, + // deepEqual(actual, expected, [message]) + deepEqual = qunit.deepEqual, + // notEqual(actual, expected, [message]) + notEqual = qunit.notEqual, + // throws(block, [expected], [message]) + throws = qunit.throws; + + module('videojs-test', { + setup: function() { + // force HTML support so the tests run in a reasonable + // environment under phantomjs + realIsHtmlSupported = videojs.Html5.isSupported; + videojs.Html5.isSupported = function() { + return true; + }; + + // create a video element + var video = document.createElement('video'); + document.querySelector('#qunit-fixture').appendChild(video); + + // create a video.js player + player = videojs(video); + + // initialize the plugin with the default options + player.test(); + }, + teardown: function() { + videojs.Html5.isSupported = realIsHtmlSupported; + } + }); + + test('registers itself', function() { + ok(player.test, 'registered the plugin'); + }); +})(window, window.videojs, window.QUnit);