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