Skip to content

Instantly share code, notes, and snippets.

@vijeth-aradhya

vijeth-aradhya/video-resolution-switcher-withCDNs.html Secret

Created July 8, 2017 13:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vijeth-aradhya/b70663c50b7f4a0a6ddab59f9112f671 to your computer and use it in GitHub Desktop.
Save vijeth-aradhya/b70663c50b7f4a0a6ddab59f9112f671 to your computer and use it in GitHub Desktop.
Download ZIP
Plugin by kmoskwiak to add option for switching resolutions
Raw
video-resolution-switcher-withCDNs.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="http://kmoskwiak.github.io/videojs-resolution-switcher/node_modules/video.js/dist/video-js.min.css" rel="stylesheet">
<link href="http://kmoskwiak.github.io/videojs-resolution-switcher/node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.css" rel="stylesheet">
</head>
<body>
<div class="info">
<p>
Set sources dynamically
</p>
</div>
<video id='video' class="video-js vjs-default-skin"></video>
<div class="info">
<p>
Set sources inside <code>&ltvideo&gt</code> tag
</p>
</div>
<video id="video_1" class="video-js vjs-default-skin" width="1000" controls data-setup='{}' muted>
<source src="https://vjs.zencdn.net/v/oceans.mp4?480" type='video/mp4' label='SD' res='480' />
<source src="https://vjs.zencdn.net/v/oceans.mp4?1080" type='video/mp4' label='HD' res='1080'/>
<source src="https://vjs.zencdn.net/v/oceans.mp4?144" type='video/mp4' label='phone' res='144'/>
<source src="https://vjs.zencdn.net/v/oceans.mp4?2160" type='video/mp4' label='4k' res='2160'/>
</video>
<!--
CDNs:
Newer versions:
<https://cdnjs.cloudflare.com/ajax/libs/video.js/6.2.1/video.min.js>
<https://cdnjs.cloudflare.com/ajax/libs/video.js/6.2.1/video-js.min.css>
<http://vjs.zencdn.net/c/video-js.swf>
Works: (but dynamicLabel doesn't work)
<https://ajax.cdnjs.com/ajax/libs/videojs-swf/5.4.0/video-js.swf>
<https://vjs.zencdn.net/5.19/video-js.min.css>
<https://vjs.zencdn.net/5.19/video.min.js>
Check out <https://kmoskwiak.github.io/videojs-resolution-switcher/>:
<http://kmoskwiak.github.io/videojs-resolution-switcher/node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.js>
<http://kmoskwiak.github.io/videojs-resolution-switcher/node_modules/video.js/dist/video.js>
<http://kmoskwiak.github.io/videojs-resolution-switcher/node_modules/video.js/dist/video-js.min.css>
<http://kmoskwiak.github.io/videojs-resolution-switcher/node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.css>
-->
<script src="http://kmoskwiak.github.io/videojs-resolution-switcher/node_modules/video.js/dist/video.js"></script>
<script>
videojs.options.flash.swf = "https://ajax.cdnjs.com/ajax/libs/videojs-swf/5.4.0/video-js.swf"
</script>
<script src="http://kmoskwiak.github.io/videojs-resolution-switcher/node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.js"></script>
<script>
// fire up the plugin
videojs('video', {
controls: true,
muted: true,
width: 1000,
plugins: {
videoJsResolutionSwitcher: {
ui: true,
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>
<script>
videojs('video_1').videoJsResolutionSwitcher()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment