mirror of
https://github.com/kmoskwiak/videojs-resolution-switcher.git
synced 2025-10-03 09:49:21 +02:00
309 lines
9 KiB
HTML
309 lines
9 KiB
HTML
<!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.min.css" rel="stylesheet">
|
|
<link href="node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
|
<link href="style.css" rel="stylesheet">
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-66101871-1', 'auto');
|
|
ga('send', 'pageview');
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="header">
|
|
<h1>Video.js resolution switcher</h1>
|
|
<p>
|
|
<a href="https://github.com/kmoskwiak/videojs-resolution-switcher">https://github.com/kmoskwiak/videojs-resolution-switcher</a>
|
|
</p>
|
|
|
|
<div class="social">
|
|
<iframe src="https://ghbtns.com/github-btn.html?user=kmoskwiak&repo=videojs-resolution-switcher&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
|
|
<iframe src="https://ghbtns.com/github-btn.html?user=kmoskwiak&repo=videojs-resolution-switcher&type=watch&count=true&v=2" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
|
|
<iframe src="https://ghbtns.com/github-btn.html?user=kmoskwiak&repo=videojs-resolution-switcher&type=fork&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
|
|
<iframe src="https://ghbtns.com/github-btn.html?user=kmoskwiak&type=follow&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="container-fluid section">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h1>
|
|
Set sources dynamically
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<pre>
|
|
videojs('video', {
|
|
controls: true,
|
|
plugins: {
|
|
videoJsResolutionSwitcher: {
|
|
default: 'low', // Default resolution [{Number}, 'low', 'high'],
|
|
dynamicLabel: true
|
|
}
|
|
}
|
|
}, 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())
|
|
})
|
|
})
|
|
</pre>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<video id='video' class="video-js vjs-default-skin"></video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid section">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h1>
|
|
Set sources inside <code><video></code> tag
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<pre>
|
|
<video id="video_1" class="video-js vjs-default-skin" controls data-setup='{}' >
|
|
<source src="https://vjs.zencdn.net/v/oceans.mp4?sd" type='video/mp4' label='SD' res='480' />
|
|
<source src="https://vjs.zencdn.net/v/oceans.mp4?hd" type='video/mp4' label='HD' res='1080'/>
|
|
<source src="https://vjs.zencdn.net/v/oceans.mp4?phone" type='video/mp4' label='phone' res='144'/>
|
|
<source src="https://vjs.zencdn.net/v/oceans.mp4?4k" type='video/mp4' label='4k' res='2160'/>
|
|
</video>
|
|
</pre>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<video id="video_1" class="video-js vjs-default-skin" fluid="true" controls data-setup='{}' >
|
|
<source src="https://vjs.zencdn.net/v/oceans.mp4?sd" type='video/mp4' label='SD' res='480' />
|
|
<source src="https://vjs.zencdn.net/v/oceans.mp4?hd" type='video/mp4' label='HD' res='1080'/>
|
|
<source src="https://vjs.zencdn.net/v/oceans.mp4?phone" type='video/mp4' label='phone' res='144'/>
|
|
<source src="https://vjs.zencdn.net/v/oceans.mp4?4k" type='video/mp4' label='4k' res='2160'/>
|
|
</video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid section">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h1>
|
|
Use flash tech
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<pre>
|
|
videojs('video', {
|
|
controls: true,
|
|
techOrder: ['flash'],
|
|
preload: 'auto',
|
|
plugins: {
|
|
videoJsResolutionSwitcher: {
|
|
default: 'low', // Default resolution [{Number}, 'low', 'high'],
|
|
dynamicLabel: true
|
|
}
|
|
}
|
|
}, 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())
|
|
})
|
|
})
|
|
</pre>
|
|
</div>
|
|
<div class="col-md-6">
|
|
|
|
<div class="embed-responsive embed-responsive-16by9">
|
|
<video id='video_flash' class="video-js vjs-default-skin embed-responsive-item"></video>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid section">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h1>
|
|
Use <a href="https://github.com/eXon/videojs-youtube" >YouTube</a> tech
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<pre>
|
|
videojs('video', {
|
|
controls: true,
|
|
techOrder: ["youtube"],
|
|
sources: [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=iD_MyDbP_ZE"}],
|
|
plugins: {
|
|
videoJsResolutionSwitcher: {
|
|
default: 'low',
|
|
dynamicLabel: true
|
|
}
|
|
}
|
|
}, function(){
|
|
var player = this;
|
|
player.on('resolutionchange', function(){
|
|
console.info('Source changed')
|
|
})
|
|
});
|
|
</pre>
|
|
</div>
|
|
<div class="col-md-6">
|
|
|
|
<div class="embed-responsive embed-responsive-16by9">
|
|
<video id='video_youtube' class="video-js vjs-default-skin embed-responsive-item"></video>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<a class='kspr' href="https://kspr.pl">kspr</a>
|
|
</div>
|
|
|
|
<script src="node_modules/video.js/dist/video.js"></script>
|
|
<script src="node_modules/videojs-youtube/dist/Youtube.js"></script>
|
|
<script src="node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.js"></script>
|
|
<script>
|
|
// fire up the plugin
|
|
videojs('video', {
|
|
controls: true,
|
|
fluid: true,
|
|
plugins: {
|
|
videoJsResolutionSwitcher: {
|
|
default: 'low', // Default resolution [{Number}, 'low', 'high'],
|
|
dynamicLabel: true
|
|
}
|
|
}
|
|
}, 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())
|
|
})
|
|
})
|
|
|
|
|
|
|
|
// flash tech
|
|
videojs('video_flash', {
|
|
controls: true,
|
|
techOrder: ['flash'],
|
|
preload: 'auto',
|
|
plugins: {
|
|
videoJsResolutionSwitcher: {
|
|
default: 'low', // Default resolution [{Number}, 'low', 'high'],
|
|
dynamicLabel: true
|
|
}
|
|
}
|
|
}, 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())
|
|
})
|
|
})
|
|
|
|
// Youtube tech
|
|
videojs('video_youtube', {
|
|
controls: true,
|
|
techOrder: ["youtube"],
|
|
sources: [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=iD_MyDbP_ZE"}],
|
|
plugins: {
|
|
videoJsResolutionSwitcher: {
|
|
default: 'low',
|
|
dynamicLabel: true
|
|
}
|
|
}
|
|
}, function(){
|
|
var player = this;
|
|
player.on('resolutionchange', function(){
|
|
console.info('Source changed')
|
|
})
|
|
});
|
|
</script>
|
|
|
|
|
|
<script>
|
|
videojs('video_1').videoJsResolutionSwitcher()
|
|
</script>
|
|
</body>
|
|
</html>
|