yetangitu/videojs-resolution-switcher
1
0
Fork 0
mirror of https://github.com/kmoskwiak/videojs-resolution-switcher.git synced 2025-10-03 09:49:21 +02:00
Code Issues Releases Wiki Activity

Merge branch 'youtube'

Browse source
This commit is contained in:
Kasper Moskwiak 2016-03-13 20:58:30 +01:00
commit cf4e05ef9d
5 changed files with 229 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

81
examples/flash.html Normal file
View file

@ -0,0 +1,81 @@
<!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;
background: #777;
}
.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>
Use flash
</p>
</div>
<video id='video_flash' class="video-js vjs-default-skin"></video>
<script src="../node_modules/video.js/dist/video.js"></script>
<script>
videojs.options.flash.swf = "../node_modules/video.js/dist/video-js.swf"
</script>
<script src="../lib/videojs-resolution-switcher.js"></script>
<script>
// Use flash
videojs('video_flash', {
controls: true,
techOrder: ['flash'],
preload: 'auto',
width: 1000,
plugins: {
videoJsResolutionSwitcher: {
default: 'low', // Default resolution [{Number}, 'low', 'high'],
dynamicLabel: true // Display dynamic labels or gear symbol
}
}
}, function(){
var player = this;
window.player = player
player.updateSrc([
{
src: 'https://vjs.zencdn.net/v/oceans.mp4?sd',
type: 'video/mp4',
label: 'SD',
res: 360
},
{
src: 'https://vjs.zencdn.net/v/oceans.mp4?hd',
type: 'video/mp4',
label: 'HD',
res: 720
}
])
player.on('resolutionchange', function(){
console.info('Source changed to %s', player.src())
})
})
</script>
</body>
</html>

56
example.html → examples/html5.html
View file

@ -4,8 +4,8 @@
<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">
<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;
@ -45,19 +45,12 @@
<source src="https://vjs.zencdn.net/v/oceans.mp4?2160" type='video/mp4' label='4k' res='2160'/>
</video>
<div class="info">
<p>
Use flash
</p>
</div>
<video id='video_flash' class="video-js vjs-default-skin"></video>
<script src="node_modules/video.js/dist/video.js"></script>
<script src="../node_modules/video.js/dist/video.js"></script>
<script>
videojs.options.flash.swf = "node_modules/video.js/dist/video-js.swf"
videojs.options.flash.swf = "../node_modules/video.js/dist/video-js.swf"
</script>
<script src="lib/videojs-resolution-switcher.js"></script>
<script src="../lib/videojs-resolution-switcher.js"></script>
<script>
// fire up the plugin
videojs('video', {
@ -94,45 +87,6 @@
})
})
// Use flash
videojs('video_flash', {
controls: true,
techOrder: ['flash'],
preload: 'auto',
width: 1000,
plugins: {
videoJsResolutionSwitcher: {
default: 'low', // Default resolution [{Number}, 'low', 'high'],
dynamicLabel: true // Display dynamic labels or gear symbol
}
}
}, function(){
var player = this;
window.player = player
player.updateSrc([
{
src: 'https://vjs.zencdn.net/v/oceans.mp4?sd',
type: 'video/mp4',
label: 'SD',
res: 360
},
{
src: 'https://vjs.zencdn.net/v/oceans.mp4?hd',
type: 'video/mp4',
label: 'HD',
res: 720
}
])
player.on('resolutionchange', function(){
console.info('Source changed to %s', player.src())
})
})
</script>

71
examples/youtube.html Normal file
View file

@ -0,0 +1,71 @@
<!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;
background: #777;
}
.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>
Youtube tech
</p>
</div>
<video id='video' class="video-js vjs-default-skin"></video>
<script src="../node_modules/video.js/dist/video.js"></script>
<script src="../node_modules/videojs-youtube/dist/Youtube.js"></script>
<script>
videojs.options.flash.swf = "node_modules/video.js/dist/video-js.swf"
</script>
<script src="../lib/videojs-resolution-switcher.js"></script>
<script>
var sourcePicker = function(){
console.log('asdasd')
}
// fire up the plugin
videojs('video', {
controls: true,
muted: true,
techOrder: ["youtube"],
width: 500,
sources: [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=iD_MyDbP_ZE"}],
plugins: {
videoJsResolutionSwitcher: {
default: 'low',
dynamicLabel: true,
customSourcePicker: sourcePicker
}
}
}, function(){
var player = this;
window.player = player;
player.on('resolutionchange', function(){
console.info('Source changed')
})
});
</script>
</body>
</html>

78
lib/videojs-resolution-switcher.js
View file

@ -86,7 +86,7 @@
// Probably because of https://github.com/videojs/video-js-swf/issues/124
// If player preload is 'none' and then loadeddata not fired. So, we need timeupdate event for seek handle (timeupdate doesn't work properly with flash)
var handleSeekEvent = 'loadeddata';
if(this.player_.preload() === 'none' && this.player_.techName_ !== 'Flash') {
if(this.player_.techName_ != 'Youtube' && this.player_.preload() === 'none' && this.player_.techName_ !== 'Flash') {
handleSeekEvent = 'timeupdate';
}
setSourcesSanitized(this.player_, this.src, this.options_.label, customSourcePicker).one(handleSeekEvent, function() {
@ -283,13 +283,75 @@
return {res: selectedRes, label: selectedLabel, sources: groupedSrc.res[selectedRes]};
}
// Create resolution switcher for videos form <source> tag inside <video>
if(player.options_.sources.length > 1){
// Wait for player ready event
player.ready(function(){
player.updateSrc(player.options_.sources);
});
}
function initResolutionForYt(player){
// Init resolution
player.tech_.ytPlayer.setPlaybackQuality('default');
// Capture events
player.tech_.ytPlayer.addEventListener('onPlaybackQualityChange', function(){
player.trigger('resolutionchange');
});
// We must wait for play event
player.one('play', function(){
var qualities = player.tech_.ytPlayer.getAvailableQualityLevels();
// Map youtube qualities names
var _yts = {
"highres": {res: 1080, label: '1080', yt: 'highres'},
"hd1080": {res: 1080, label: '1080', yt: 'hd1080'},
"hd720": {res: 720, label: '720', yt: 'hd720'},
"large": {res: 480, label: '480', yt: 'large'},
"medium": {res: 360, label: '360', yt: 'medium'},
"small": {res: 240, label: '240', yt: 'small'},
"tiny": {res: 144, label: '144', yt: 'tiny'},
"auto": {res: 0, label: 'auto', yt: 'default'}
}
var _sources = [];
qualities.map(function(q){
_sources.push({
src: player.src().src,
type: player.src().type,
label: _yts[q].label,
res: _yts[q].res,
_yt: _yts[q].yt
})
});
groupedSrc = bucketSources(_sources);
// Overwrite defualt sourcePicer function
var _customSourcePicker = function(_player, _sources, _label){
player.tech_.ytPlayer.setPlaybackQuality(_sources[0]._yt);
return player;
}
var choosen = {label: 'auto', res: 0, sources: groupedSrc.label['auto']};
var menuButton = new ResolutionMenuButton(player, {
sources: groupedSrc,
initialySelectedLabel: choosen.label,
initialySelectedRes: choosen.res,
customSourcePicker: _customSourcePicker
}, settings, label);
menuButton.el().classList.add('vjs-resolution-button');
player.controlBar.resolutionSwitcher = player.controlBar.addChild(menuButton);
});
}
player.ready(function(){
if(player.options_.sources.length > 1){
// tech: Html5 and Flash
// Create resolution switcher for videos form <source> tag inside <video>
player.updateSrc(player.options_.sources);
}
if(player.techName_ === 'Youtube'){
// tech: YouTube
initResolutionForYt(player);
}
});
};

3
package.json
View file

@ -43,7 +43,8 @@
"grunt-contrib-uglify": "^1.0",
"grunt-contrib-watch": "^1.0",
"video.js": "^5.8",
"qunitjs": "^1.22"
"qunitjs": "^1.22",
"videojs-youtube": "^2.0.8"
},
"peerDependencies": {
"video.js": "^5.8"