Setting options to the player

Question

I am using HTML5 video palyer using following code

<video id="my-video" class="video-js" controls preload="auto" width="100%"  height="600"
   data-setup="{}">
    <source src="" type='video/mp4'>
    <source src="" type='video/webm'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

Is there any way that add setting options to the player like play smaller versions hd, I am encoding the videos to different speeds. Or is there some free players that offers such functionality,

Answer 1

It sounds like you are using an ABR stream with multiple bit rates of the video available.

ABR, Adaptive Bit Rate Streaming, essentially allows the client device or player download the video in chunks, e.g 10 second chunks, and select the next chunk from the bit rate most appropriate to the current network conditions. See some more info in this answer also: https://stackoverflow.com/a/42365034/334402

Most of the common open source DASH or HLS (ABR formats) players include mechanisms to select the track you want.

For example, in dash.js player, Look at the MediaPlayer.js source code:

• https://github.com/Dash-Industry-Forum/dash.js/blob/development/src/streaming/MediaPlayer.js

and the function 'setQualityFor':

/**
     * Sets the current quality for media type instead of letting the ABR Heuristics automatically selecting it.
     * This value will be overwritten by the ABR rules unless setAutoSwitchQualityFor(type, false) is called.
     *
     * @param {string} type - 'video' or 'audio'
     * @param {number} value - the quality index, 0 corresponding to the lowest bitrate
     * @memberof module:MediaPlayer
     * @see {@link module:MediaPlayer#setAutoSwitchQualityFor setAutoSwitchQualityFor()}
     * @see {@link module:MediaPlayer#getQualityFor getQualityFor()}
     * @instance
     */
    function setQualityFor(type, value) {
        if (!playbackInitialized) {
            throw PLAYBACK_NOT_INITIALIZED_ERROR;
        }
        abrController.setPlaybackQuality(type, streamController.getActiveStreamInfo(), value);
    }