用于HTML5视频的高清控件

Question

I have set up an Html5 video and it has the basic controls. However, the video I uploaded is quite heavy and I would like to give a lower resolution option, like an HD switch control. I looked on the internet on how to apply an HD button to html5 but the primary solution seems to install a video player. Is there a simpler way to implement an HD button without needing to install the video player? I already set up my html5 video with several jQuery commands and I would not like to go through the effort of starting from scratch again. I also looked that one could customise the html5 video controls as well. Would one be able to set up a customised HD button through html/javascript only? If yes, how one does it?

Here's the code I have at the moment

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

Answer 1

you could probably make this look a lot more elegant, but the code sample below will allow you to have buttons which change the source between HD and regular versions (based on the ID of the button, but you can change the logic if needed). The code also checks to see if the browser supports mp4, ogg or webm and defaults to the first supported format (so you'd potentially need encodes for each type if you make use of that part of the code

<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

Upload the video in different qualities to your server, and play a different video depending on the quality the user has chosen.

Even if it's possible to downgrade a video on the client side, it's pointless, because the client still has to download the HD video in order to convert it.