javascript - 使用指向不同质量版本的源更改视频质量

Question

目标:

我正在尝试用尽可能少的代码困惑实现一个控件，以允许改变视频的质量。

首选项:

以下是我得到的，我宁愿解决它。我愿意使用预构建的插件或 javascript/jquery hack，但宁愿不寻求涉及重新发明(我或你)轮子(需要构建自定义视频控制方案)的解决方案，但会接受它作为最后的结果。

编辑:

对不起。并不意味着具有这种相关性，因为 url 没有反射(reflect)任何类型的模式。我把它简单化了，不假设人们会查看 url 来寻找模式。但是谢谢你的开始，因为我可能会用它来工作。再次抱歉。我会将 url 更改为没有任何模式。

<video controls preload>
   <source label="fullHD" src="http://v.com/lorem.mp4" type="video/mp4">
   <source label="720p"   src="http://v.com/ipsum.mp4" type="video/mp4" >
   <source label="360p"   src="http://v.com/dolor.mp4" type="video/mp4">
</video>

提前感谢任何可以提供一些见解的人。

Answer 1

抱歉提问。事实证明，我几乎可以自己解决所有问题。讨厌那些时刻。这是我想出的解决方案，它只涉及复制 <source>我需要基于 label属性，将其删除，并将其添加到 <video> 中元素:

HTML

<div class='vidcontainer'>
   <select class='qualitypick' autocomplete='off'>
      <option selected>fullHD</option>
      <option>720p</option>
      <option>360p</option>
   </select>
   <video controls preload>
      <source label="fullHD" src="http://v.com/lorem.mp4" type="video/mp4">
      <source label="720p"   src="http://v.com/ipsum.mp4" type="video/mp4" >
      <source label="360p"   src="http://v.com/dolor.mp4" type="video/mp4">
   </video>
</div>

JQUERY

$(document).ready(function(){
   $('.qualitypick').change(function(){ 

      //Have several videos in file, so have to navigate directly
      video = $(this).parent().find("video");
      
      //Need access to DOM element for some functionality
      videoDOM = video.get(0);

      curtime = videoDOM.currentTime;  //Get Current Time of Video
      source = video.find("source[label=" + $(this).textContent + "]"); //Copy Source

      source.remove();                 //Remove the source from select
      video.prepend(source);           //Prepend source on top of options
      video.load();                    //Reload Video
      videoDOM.currentTime = curtime;  //Continue from video's stop
      videoDOM.play();                 //Resume video
   })
})

虽然这不是我的本意，但希望我的回答对你有所帮助。再次抱歉在考虑清楚之前问。