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())
})
})
<video> tag
<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>
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())
})
})
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')
})
});