mirror of
https://github.com/kmoskwiak/videojs-resolution-switcher.git
synced 2025-10-03 09:49:21 +02:00
init
This commit is contained in:
Kasper Moskwiak
parent
2ef9608d5a
commit
940c95ae67
12 changed files with 452 additions and 0 deletions
13
.editorconfig
Normal file
13
.editorconfig
Normal file
|
|
@ -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
|
||||||
11
.jshintrc
Normal file
11
.jshintrc
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"browser" : true,
|
||||||
|
"curly": true,
|
||||||
|
"eqeqeq": true,
|
||||||
|
"quotmark" : "single",
|
||||||
|
"trailing" : true,
|
||||||
|
"undef" : true,
|
||||||
|
"predef" : [
|
||||||
|
"videojs"
|
||||||
|
]
|
||||||
|
}
|
||||||
3
.npmignore
Normal file
3
.npmignore
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
dist/
|
||||||
|
test/
|
||||||
|
*~
|
||||||
84
Gruntfile.js
Normal file
84
Gruntfile.js
Normal file
|
|
@ -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']);
|
||||||
|
};
|
||||||
13
LICENSE-Apache-2.0
Normal file
13
LICENSE-Apache-2.0
Normal file
|
|
@ -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.
|
||||||
33
README.md
Normal file
33
README.md
Normal file
|
|
@ -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
|
||||||
|
<script src="video.js"></script>
|
||||||
|
<script src="videojs-resolution-switcher.js"></script>
|
||||||
|
<script>
|
||||||
|
videojs(document.querySelector('video')).test();
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
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
|
||||||
68
example.html
Normal file
68
example.html
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Video.js Resolution Switcher</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
|
||||||
|
<link href="lib/videojs-resolution-switcher.css" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
background-color: #eee;
|
||||||
|
border: thin solid #333;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 0 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.video-js {
|
||||||
|
margin: 40px auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="info">
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<video id='video' class="video-js vjs-default-skin"></video>
|
||||||
|
|
||||||
|
<script src="node_modules/video.js/dist/video.js"></script>
|
||||||
|
<script src="lib/videojs-resolution-switcher.js"></script>
|
||||||
|
<script>
|
||||||
|
// fire up the plugin
|
||||||
|
videojs('video', {
|
||||||
|
controls: true,
|
||||||
|
muted: true,
|
||||||
|
fluid: true
|
||||||
|
}, function(){
|
||||||
|
var player = this;
|
||||||
|
|
||||||
|
player.newVideoSources([
|
||||||
|
{
|
||||||
|
src: 'http://media.xiph.org/mango/tears_of_steel_1080p.webm',
|
||||||
|
type: 'video/webm',
|
||||||
|
label: '360'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: 'http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4',
|
||||||
|
type: 'video/mp4',
|
||||||
|
label: '720'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
window.player = player;
|
||||||
|
|
||||||
|
player.on('resolutionchange', function(){
|
||||||
|
console.info('Source changed to %s', player.src())
|
||||||
|
})
|
||||||
|
|
||||||
|
}).videoJsResolutionSwitcher();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
16
lib/videojs-resolution-switcher.css
Normal file
16
lib/videojs-resolution-switcher.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
104
lib/videojs-resolution-switcher.js
Normal file
104
lib/videojs-resolution-switcher.js
Normal file
|
|
@ -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);
|
||||||
29
package.json
Normal file
29
package.json
Normal file
|
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
21
test/index.html
Normal file
21
test/index.html
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Video.js Test</title>
|
||||||
|
<link rel="stylesheet" href="../node_modules/qunitjs/qunit/qunit.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="qunit"></div>
|
||||||
|
<div id="qunit-fixture"></div>
|
||||||
|
<script src="../node_modules/qunitjs/qunit/qunit.js"></script>
|
||||||
|
<script>
|
||||||
|
test('the environment is sane', function() {
|
||||||
|
ok(true, 'everything is swell');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<script src="../node_modules/video.js/dist/video-js/video.js"></script>
|
||||||
|
<script src="../lib/videojs-test.js"></script>
|
||||||
|
<script src="videojs-test.test.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
57
test/videojs-resolution-switcher.test.js
Normal file
57
test/videojs-resolution-switcher.test.js
Normal file
|
|
@ -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);
|
||||||
Loading…
Add table
Add a link
Reference in a new issue