设置播放器的选项

Question

我正在使用HTML5视频播放器使用以下代码

<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>

有没有办法为播放器添加设置选项，如播放较小版本hd，我正在以不同的速度编码视频。或者是否有一些提供此类功能的免费播放器，

Answer 1

听起来您正在使用具有多个视频比特率的ABR流。

ABR，自适应比特率流，实质上允许客户端设备或播放器以块的形式下载视频，例如10秒块，并从最适合当前网络条件的比特率中选择下一个块。请参阅此答案中的更多信息：https://stackoverflow.com/a/42365034/334402

大多数常见的开源DASH或HLS（ABR格式）播放器都包含选择所需轨道的机制。

例如，在dash.js播放器中，查看MediaPlayer.js源代码：

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

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