{"id":19217508,"url":"https://github.com/lwdgit/videojs-resolution-switcher","last_synced_at":"2025-07-31T23:33:10.061Z","repository":{"id":79040460,"uuid":"113396936","full_name":"lwdgit/videojs-resolution-switcher","owner":"lwdgit","description":null,"archived":false,"fork":false,"pushed_at":"2018-01-08T08:38:42.000Z","size":21,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-04T19:11:55.517Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lwdgit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-Apache-2.0","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-07T03:16:18.000Z","updated_at":"2017-12-07T03:30:09.000Z","dependencies_parsed_at":"2023-07-07T04:33:39.215Z","dependency_job_id":null,"html_url":"https://github.com/lwdgit/videojs-resolution-switcher","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lwdgit%2Fvideojs-resolution-switcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lwdgit%2Fvideojs-resolution-switcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lwdgit%2Fvideojs-resolution-switcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lwdgit%2Fvideojs-resolution-switcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lwdgit","download_url":"https://codeload.github.com/lwdgit/videojs-resolution-switcher/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240292364,"owners_count":19778311,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T14:22:33.244Z","updated_at":"2025-02-23T08:46:44.873Z","avatar_url":"https://github.com/lwdgit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Video.js Resolution Switcher [![Build Status](https://travis-ci.org/kmoskwiak/videojs-resolution-switcher.svg?branch=master)](https://travis-ci.org/kmoskwiak/videojs-resolution-switcher) \n\nResolution switcher for [video.js v5](https://github.com/videojs/video.js)\n\n## Example\n\n[Working examples](examples) of the plugin you can check out if you're having trouble. Or check out this [demo](https://kmoskwiak.github.io/videojs-resolution-switcher/).\n\n## Getting Started\n\nInstall plugin with\n\n**npm**\n```\nnpm i videojs-resolution-switcher\n```\n\nor **bower**\n```\nbower install videojs-resolution-switcher\n```\n\n\n### Setup sources dynamically:\n\n```html\n\u003cvideo id='video' class=\"video-js vjs-default-skin\"\u003e\u003c/video\u003e\n\u003cscript src=\"video.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"videojs-resolution-switcher.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  videojs('video', {\n    controls: true,\n    plugins: {\n        videoJsResolutionSwitcher: {\n          default: 'high',\n          dynamicLabel: true\n        }\n      }\n  }, function(){\n  \n    // Add dynamically sources via updateSrc method\n    player.updateSrc([\n        {\n          src: 'http://media.xiph.org/mango/tears_of_steel_1080p.webm',\n          type: 'video/webm',\n          label: '360'\n        },\n        {\n          src: 'http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4',\n          type: 'video/mp4',\n          label: '720'\n        }\n      ])\n\n      player.on('resolutionchange', function(){\n        console.info('Source changed to %s', player.src())\n      })\n      \n  })\n\u003c/script\u003e\n```\n\n### Or use `\u003csource\u003e` tags:\n\n```html\n\n\u003cvideo id=\"video\" class=\"video-js vjs-default-skin\" width=\"1000\" controls data-setup='{}'\u003e\n   \u003csource src=\"http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4\" type='video/mp4' label='SD' /\u003e\n   \u003csource src=\"http://media.xiph.org/mango/tears_of_steel_1080p.webm\" type='video/webm' label='HD'/\u003e\n\u003c/video\u003e\n\u003cscript\u003e\n  videojs('video').videoJsResolutionSwitcher()\n\u003c/script\u003e\n\n```\n\n\n### YouTube tech\n\nYouTube tech form https://github.com/eXon/videojs-youtube\n\n```html\n\u003cvideo id='video' class=\"video-js vjs-default-skin\"\u003e\u003c/video\u003e\n\u003cscript src=\"../lib/videojs-resolution-switcher.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n\tvideojs('video', {\n\t\tcontrols: true,\n\t\ttechOrder:  [\"youtube\"],\n\t\tsources: [{ \"type\": \"video/youtube\", \"src\": \"https://www.youtube.com/watch?v=iD_MyDbP_ZE\"}],\n\t\tplugins: {\n\t\t\tvideoJsResolutionSwitcher: {\n\t\t\t\tdefault: 'low',\n\t\t\t\tdynamicLabel: true\n\t\t\t}\n\t\t}\n\t}, function(){\n\t\tvar player = this;\n\t\tplayer.on('resolutionchange', function(){\n\t\t\tconsole.info('Source changed')\n\t\t})\n\t});\n\n\u003c/script\u003e\n\n```\n\n### Flash tech\n\nWhen using flash tech `preload=\"auto\"` is required.\n\n## Source options\n\nSources can passed to player using `updateSrc` method or `\u003csource\u003e` tag as shown above. Avalible options for each source are:\n* label - `String` (required) is shown in menu (ex. 'SD' or '360p')\n* res - `Number` is resolution of video used for sorting (ex. 360 or 1080)\n\n## Plugin options\n\nYou can pass options to plugin like this:\n\n```javascript\n\nvideojs('video', {\n      controls: true,\n      muted: true,\n      width: 1000,\n      plugins: {\n        videoJsResolutionSwitcher: {\n          default: 'low'\n        }\n      }\n    }, function(){\n      // this is player\n    })\n```\n### Avalible options:\n* 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.\n* dynamicLabel - `{Boolean}` - if `true` current label will be displayed in control bar. By default gear icon is displayed.\n* customSourcePicker - `{Function}` - custom function for selecting source.\n\n\n## Methods\n\n\n### updateSrc([source])\nReturns video.js player object if used as setter. If `source` is not passed it acts like [player.src()](http://docs.videojs.com/docs/api/player.html#Methodssrc)\n```javascript\n\n// Update video sources\nplayer.updateSrc([\n  { type: \"video/mp4\", src: \"http://www.example.com/path/to/video.mp4\", label: 'SD' },\n  { type: \"video/mp4\", src: \"http://www.example.com/path/to/video.mp4\", label: 'HD' },\n  { type: \"video/mp4\", src: \"http://www.example.com/path/to/video.mp4\", label: '4k' }\n])\n\n```\n#### PARAMETERS:\n| name | type | required | description |\n|:----:|:----:|:--------:|:-----------:|\n| source| array| no | array of sources |\n\n### currentResolution([label], [customSourcePicker])\nIf used as getter returns current resolution object:\n```javascript\n  {\n    label: 'SD', // current label\n    sources: [\n      { type: \"video/webm\", src: \"http://www.example.com/path/to/video.webm\", label: 'SD' },\n      { type: \"video/mp4\", src: \"http://www.example.com/path/to/video.mp4\", label: 'SD' }\n    ] // array of sources with current label\n  }\n```\n\nIf used as setter returns video.js player object.\n\n\n```javascript\n\n// Get current resolution\nplayer.currentResolution(); // returns object {label '', sources: []}\n\n// Set resolution\nplayer.currentResolution('SD'); // returns videojs player object\n```\n#### PARAMETERS:\n| name | type | required | description |\n|:----:|:----:|:--------:|:-----------:|\n| label| string| no | label name |\n| customSourcePicker | function | no | cutom function to choose source |\n\n#### customSourcePicker\nIf there is more than one source with the same label, player will choose source automatically. This behavior can be changed if `customSourcePicker` is passed.\n\n`customSourcePicker` must return `player` object.\n```javascript\nplayer.currentResolution('SD', function(_player, _sources, _label){\n  return _player.src(_sources[0]); \\\\ Always select first source in array\n});\n```\n`customSourcePicker` accepst 3 arguments.\n\n| name | type | required | description |\n|:----:|:----:|:--------:|:-----------:|\n| player| Object | yes | videojs player object |\n| sources | Array | no | array of sources |\n| label | String | no | name of label |\n\n`customSourcePicker` may be passed in options when player is initialized:\n```javascript\n\nvar myCustomSrcPicker = function(_p, _s, _l){\n  // select any source you want\n  return _p.src(selectedSource);\n}\n\nvideojs('video', {\n      controls: true,\n      muted: true,\n      width: 1000,\n      plugins: {\n        videoJsResolutionSwitcher: {\n          default: 'low',\n          customSourcePicker: myCustomSrcPicker\n        }\n      }\n    }, function(){\n      // this is player\n    })\n```\n\n\n### getGroupedSrc()\nReturns sources grouped by label, resolution and type.\n\n\n## Events\n\n### resolutionchange `EVENT`\n\n\u003e Fired when resolution is changed\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flwdgit%2Fvideojs-resolution-switcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flwdgit%2Fvideojs-resolution-switcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flwdgit%2Fvideojs-resolution-switcher/lists"}