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