videojs-resolution-switcher-webpack

    0.4.6 • Public • Published

    Video.js Resolution Switcher Build Status

    Resolution switcher for video.js v7

    Example

    Working examples of the plugin you can check out if you're having trouble. Or check out this demo.

    Getting Started

    Install plugin with

    npm

    npm i videojs-resolution-switcher-webpack
    

    or bower

    bower install videojs-resolution-switcher-webpack
    

    or bower

    yarn add videojs-resolution-switcher-webpack
    

    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

    Install

    npm i videojs-resolution-switcher-webpack

    DownloadsWeekly Downloads

    7

    Version

    0.4.6

    License

    Apache-2.0

    Unpacked Size

    33.1 kB

    Total Files

    16

    Last publish

    Collaborators

    • cavoixanha