react-player可否通过自定义控件实现视频分辨率切换功能？

完全可以基于现有 react-player 实现画质切换功能，不需要额外更换播放器库，核心实现逻辑如下： #

实现原理 #

react-player 本身是各平台原生播放器API的上层封装，画质切换能力本质依赖你接入的视频源本身支持多分辨率，你可以通过 react-player 暴露的底层实例调用对应能力实现需求：

• 如果你接入的是 YouTube、Vimeo 这类第三方托管视频：直接调用 react-player 实例的 getInternalPlayer() 方法，即可拿到对应平台的原生播放器实例，直接调用平台开放的画质相关API即可：
  • YouTube 原生实例提供 getAvailableQualityLevels() 方法获取可用分辨率列表，setPlaybackQuality(quality) 方法设置目标分辨率
  • Vimeo 原生实例提供 getQualities() 方法获取可用分辨率列表，setQuality(quality) 方法设置目标分辨率
• 如果你接入的是自托管 HLS/DASH 流媒体：可在 react-player 的 config 参数中配置注入 hls.js/dash.js 实例，拿到流媒体实例后即可获取多档码率的清晰度列表，调用对应方法切换指定码率的分片即可完成画质切换

实现步骤 #

1. 给 react-player 绑定 ref 实例，在你开发的齿轮按钮点击事件中，通过 playerRef.current.getInternalPlayer() 获取对应源的原生实例
2. 调用原生实例对应的API获取可用分辨率列表，做统一格式转换后渲染到你开发的 popover 层中
3. 监听用户点击分辨率选项的事件，调用原生实例的画质设置方法即可完成切换

注意不同平台的分辨率返回格式存在差异，比如YouTube会返回 hd1080、hd720 这类标识，Vimeo会返回带height字段的对象，需要你做一层统一的格式适配后再展示给用户

如果你后续的业务场景主要以自托管视频为主，几乎不需要接入第三方平台的视频流，也可以考虑更换为 video.js，它的生态中有现成的画质切换插件可以直接复用。但如果你已经基于 react-player 完成了大部分基础控件的开发，直接基于上述方案扩展即可，不需要重构现有代码。

内容的提问来源于stack exchange，提问作者otran