Javascript HTML5视频的高清控制

我已经建立了一个Html5视频，它有基本的控制。然而，我上传的视频是相当沉重的，我想给一个较低的分辨率选项，如高清开关控制。我在互联网上看到了如何将高清按钮应用到html5上，但主要的解决方案似乎是安装一个视频播放器。有没有一种更简单的方法来实现高清按钮而无需安装视频播放器？我已经用几个jQuery命令设置了我的html5视频，我不想再从头开始。我还认为可以定制html5视频控件。您是否能够仅通过html/javascript设置定制的HD按钮？如果是，怎么做

这是我目前掌握的密码

<video src="../Frustrated/Frustrated.mp4" controls preload="metadata"> <source src="../Frustrated/Frustrated.mp4" type="video/mp4">

---

将不同质量的视频上载到服务器，并根据用户选择的质量播放不同的视频

---

即使可以在客户端对视频进行降级，这也是毫无意义的，因为客户端仍然需要下载高清视频才能进行转换。

您可能会让它看起来更加优雅，但是下面的代码示例允许您使用按钮，根据按钮的ID在HD和常规版本之间更改源代码，但是如果需要，您可以更改逻辑。该代码还检查浏览器是否支持mp4、ogg或webm，并默认为第一种支持的格式，因此如果使用该部分代码，您可能需要对每种类型进行编码

<video width="400" controls id="video">
  <source src="../Frustrated/furstrated.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<br>

<button id="frustratedHD" onclick="playvid(this)">HD</button><button id="frustrated" onclick="playvid(this)">Regular</button>

<script>
// gets the video element
var video = document.getElementById("video");
// sets the extension / container we'll use
var vidType = "";

// identifies what type of video we can play, assuming this is an HTML5 supporting browser  
  if (video.canPlayType) {
    if (video.canPlayType('video/mp4; codecs="avc1.42E01E"') == "probably") {
      vidType = "mp4"
    } else {
      if (video.canPlayType('video/ogg; codecs="theora"') == "probably") {
    vidType = "ogg"
        } else { if (video.canPlayType('video/webm; codecs="vp8, vorbis"') == "probably") {
          vidType = "webm"
        }
      }
    }
  }
  // you'll want to decide how to handle no supported video type...

  function playvid(vid) {
    // log selected item to confirm selection, can comment this line out
    console.log("../Frustrated/" + vid.id + "." + vidType)
    // set the video element source to selected content and correct type
    video.src = "../Frustrated/" + vid.id + "." + vidType
    video.play();
  }
  </script>

---

您如何让用户选择播放哪种音质？我使用的是html5标准控件svar video=document.getElementByIdmyVideoId；video.src=video.mp4显然，你需要一个按钮或下拉列表来改变质量，但你所要做的就是改变src。所以，现在我有了这个，你能分享你的代码吗？这是最基本的，以便更容易测试？你可以编码为HLS，但是只有一些浏览器能够正确地支持这一点，尽管我正在寻找其他控件旁边的实现。但我发现Html5本身并没有提供这种功能，这真是太遗憾了：/通过CSS定位，您可以将按钮更无缝地放入体验中，或者自己替换标准控件，或者使用Jwplayer之类的东西。是的，我尝试了Jwplayer，但我在视频开始时修改的所有jquery都无法再被识别。我可能会从头开始创建所有按钮