HTML5视频的高清控制

Question

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

这是我目前拥有的代码

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

Answer 1

您可能会使它看起来更优雅，但下面的代码示例将允许您拥有在 HD 和常规版本之间更改源的按钮（基于按钮的 ID，但如果您可以更改逻辑，如果需要）。该代码还检查浏览器是否支持 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>

Answer 2

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

即使可以在客户端降级视频，也没有任何意义，因为客户端仍然需要下载高清视频才能进行转换。