npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

videojs-resolution-switcher-vjs7

v1.0.0

Published

VideoJS Resolution Switcher for VideoJS Version 7+ Modified by Bari Artz from Poko for you using VideoJS Version 7+. For you using videojs resolution switcher from original script by kmoskwiak on Github but do not appear in VideoJS version 7+, you can usi

Downloads

304

Readme

Video.js Resolution Switcher for VideoJS Version 7+

Original script

Modified by Bari Artz from Poko

Resolution switcher for video.js v7+

Example

Check out this demo.

Getting Started

Get plugin from this Github.

Setup sources dynamically:

<video id='video' class="video-js vjs-default-skin"></video>
<script src="video.js"></script>
<script src="videojs-resolution-switcher.js"></script>
<script>
  videojs('video', {
    controls: true,
    plugins: {
        videoJsResolutionSwitcher: {
          default: 'high',
          dynamicLabel: true
        }
      }
  }, function(){
  
    // Add dynamically sources via updateSrc method
    player.updateSrc([
        {
          src: 'http://media.xiph.org/mango/tears_of_steel_1080p.webm',
          type: 'video/webm',
          label: '360'
        },
        {
          src: 'http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4',
          type: 'video/mp4',
          label: '720'
        }
      ])

      player.on('resolutionchange', function(){
        console.info('Source changed to %s', player.src())
      })
      
  })
</script>

Or use <source> tags:


<video id="video" class="video-js vjs-default-skin" width="1000" controls data-setup='{}'>
   <source src="http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4" type='video/mp4' label='SD' />
   <source src="http://media.xiph.org/mango/tears_of_steel_1080p.webm" type='video/webm' label='HD'/>
</video>
<script>
  videojs('video').videoJsResolutionSwitcher()
</script>

YouTube tech

YouTube tech form https://github.com/eXon/videojs-youtube

<video id='video' class="video-js vjs-default-skin"></video>
<script src="../lib/videojs-resolution-switcher.js"></script>
<script>
	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')
		})
	});

</script>

Flash tech

When using flash tech preload="auto" is required.

Source options

Sources can passed to player using updateSrc method or <source> tag as shown above. Avalible options for each source are:

  • label - String (required) is shown in menu (ex. 'SD' or '360p')
  • res - Number is resolution of video used for sorting (ex. 360 or 1080)

Plugin options

You can pass options to plugin like this:


videojs('video', {
      controls: true,
      muted: true,
      width: 1000,
      plugins: {
        videoJsResolutionSwitcher: {
          default: 'low'
        }
      }
    }, function(){
      // this is player
    })

Avalible options:

  • default - {Number}|'low'|'high' - default resolution. If any Number is passed plugin will try to choose source based on res parameter. If low or high is passed, plugin will choose respectively worse or best resolution (if res parameter is specified). If res parameter is not specified plugin assumes that sources array is sorted from best to worse.
  • dynamicLabel - {Boolean} - if true current label will be displayed in control bar. By default gear icon is displayed.
  • customSourcePicker - {Function} - custom function for selecting source.
  • ui - {Boolean} - If set to false button will not be displayed in control bar. Default is true.

Methods

updateSrc([source])

Returns video.js player object if used as setter. If source is not passed it acts like player.src()


// Update video sources
player.updateSrc([
  { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4", label: 'SD' },
  { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4", label: 'HD' },
  { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4", label: '4k' }
])

PARAMETERS:

| name | type | required | description | |:----:|:----:|:--------:|:-----------:| | source| array| no | array of sources |

currentResolution([label], [customSourcePicker])

If used as getter returns current resolution object:

  {
    label: 'SD', // current label
    sources: [
      { type: "video/webm", src: "http://www.example.com/path/to/video.webm", label: 'SD' },
      { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4", label: 'SD' }
    ] // array of sources with current label
  }

If used as setter returns video.js player object.


// Get current resolution
player.currentResolution(); // returns object {label '', sources: []}

// Set resolution
player.currentResolution('SD'); // returns videojs player object

PARAMETERS:

| name | type | required | description | |:----:|:----:|:--------:|:-----------:| | label| string| no | label name | | customSourcePicker | function | no | cutom function to choose source |

customSourcePicker

If there is more than one source with the same label, player will choose source automatically. This behavior can be changed if customSourcePicker is passed.

customSourcePicker must return player object.

player.currentResolution('SD', function(_player, _sources, _label){
  return _player.src(_sources[0]); \\ Always select first source in array
});

customSourcePicker accepst 3 arguments.

| name | type | required | description | |:----:|:----:|:--------:|:-----------:| | player| Object | yes | videojs player object | | sources | Array | no | array of sources | | label | String | no | name of label |

customSourcePicker may be passed in options when player is initialized:


var myCustomSrcPicker = function(_p, _s, _l){
  // select any source you want
  return _p.src(selectedSource);
}

videojs('video', {
      controls: true,
      muted: true,
      width: 1000,
      plugins: {
        videoJsResolutionSwitcher: {
          default: 'low',
          customSourcePicker: myCustomSrcPicker
        }
      }
    }, function(){
      // this is player
    })

getGroupedSrc()

Returns sources grouped by label, resolution and type.

Events

resolutionchange EVENT

Fired when resolution is changed