HTML5 视频播放器全屏更改质量答案

【问题标题】：HTML5 video player change quality on fullscreenHTML5 视频播放器全屏更改质量
【发布时间】：2017-07-20 18:47:20
【问题描述】：

我需要一个非常简单的功能，我认为每个玩家都有这个。当用户单击“全屏”时，我需要切换视频的质量。质量必须适合屏幕尺寸。

我有 1080p、720p、480p、360p、240p 的视频。默认为 240p，播放器窗口很小。我希望当用户全屏时，选择正确的分辨率（比如 1920x1080 的 1080p 或较小的 720p）

看了很多关于可用的html5播放器的资料，好像videojs和jwplayer都不错。 Videojs 具有质量切换器功能，但不能在全屏时自动切换。 Jwplayer 似乎也不支持这个。

Youtube 支持这么多年。是否有任何简单的方法可以为现有的播放器解决方案添加此类功能？（您可以提供另一个 html5 视频播放器）

谢谢

【问题讨论】：

对于支持 HLS (m3u8) 的浏览器，这相当容易，您只需要将视频编码为多比特率并从支持它的服务器传送。对于其他人，您需要更改源并在视频更改大小时寻找到适当的点
感谢您的建议。我不想要破折号/hls，因为视频质量很高，更好的用户等待缓冲区，而不是看质量差。
你试过什么？发布不起作用的代码。
我已经解决了这个问题并回答了自己。请看答案。谢谢

标签： html video jwplayer resolution video.js

【解决方案1】：

我用 VideoJS 和 https://github.com/kmoskwiak/videojs-resolution-switcher/ 插件解决了这个问题。我添加了标记的来源和这段代码：

player.on('fullscreenchange', function() {
        if(player.isFullscreen())
        {
            label='720p';
            if(screen.width>1280)
            label='1080p';              
            player.currentResolution(label);
        }
        else
            player.currentResolution('240p');
    });

【讨论】：