mirror of
https://github.com/kmoskwiak/videojs-resolution-switcher.git
synced 2025-10-05 19:42:21 +02:00
103 lines
3.8 KiB
HTML
103 lines
3.8 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 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="example">
|
|
<div class="info">
|
|
<p>
|
|
Set sources dynamically
|
|
</p>
|
|
</div>
|
|
|
|
<video id='video' class="video-js vjs-default-skin"></video>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<div class="info">
|
|
<p>
|
|
Set sources inside <code><video></code> tag
|
|
</p>
|
|
</div>
|
|
|
|
<video id="video_1" class="video-js vjs-default-skin" width="1000" controls fluid='true' data-setup='{}' >
|
|
<source src="http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4" type='video/mp4' label='SD' res='480' />
|
|
<source src="http://media.xiph.org/mango/tears_of_steel_1080p.webm" type='video/webm' label='HD' res='1080'/>
|
|
<source src="http://media.xiph.org/mango/tears_of_steel_1080p.webm" type='video/webm' label='phone' res='144'/>
|
|
<source src="http://media.xiph.org/mango/tears_of_steel_1080p.webm" type='video/webm' label='4k' res='2160'/>
|
|
</video>
|
|
</div>
|
|
<script src="node_modules/video.js/dist/video.js"></script>
|
|
<script src="node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.js"></script>
|
|
<script>
|
|
// fire up the plugin
|
|
videojs('video', {
|
|
controls: true,
|
|
muted: true,
|
|
width: 1000,
|
|
fluid: true,
|
|
plugins: {
|
|
videoJsResolutionSwitcher: {
|
|
default: 'low' // Default resolution [{Number}, 'low', 'high']
|
|
}
|
|
}
|
|
}, function(){
|
|
var player = this;
|
|
window.player = player
|
|
player.updateSrc([
|
|
{
|
|
src: 'http://media.xiph.org/mango/tears_of_steel_1080p.webm',
|
|
type: 'video/webm',
|
|
label: 'SD',
|
|
res: 360
|
|
},
|
|
{
|
|
src: 'http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4',
|
|
type: 'video/mp4',
|
|
label: 'HD',
|
|
res: 720
|
|
}
|
|
])
|
|
player.on('resolutionchange', function(){
|
|
console.info('Source changed to %s', player.src())
|
|
})
|
|
}).videoJsResolutionSwitcher();
|
|
</script>
|
|
|
|
|
|
<script>
|
|
videojs('video_1').videoJsResolutionSwitcher()
|
|
</script>
|
|
</body>
|
|
</html>
|