Question

目标：

我正在尝试使用尽可能少的代码混乱来实现控件，以允许更改视频的质量。

偏好设置：

以下是我给出的内容，我宁愿解决它。我愿意使用预先构建的插件或javascript / jquery hack，但宁愿不去寻求一个涉及重新发明（我或你）轮子的解决方案（需要构建自定义视频控制方案），但是会采用它作为最后的结果。

编辑：

对不起。并不意味着有这种相关性，因为网址没有反映出任何形式。我过度简化了它，并没有假设人们会查看模式的网址。但是，谢谢你的开始，因为我可以使用它。再次抱歉。我会将网址更改为没有任何模式。

<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>

<强> JAVASCRIPT

$(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
   })
})

虽然这不是我的意图，但我希望我的回答是有用的。在思考之前再次抱歉。

Answer 2

您不需要很多source代码。一个就足够了，但是，您需要更改source属性的值，即src。

var map={'fullHD':'1080p','720p':'720p','360p':'360p'};


function changeQ(quality){
     $('source','video#player').attr('src','http://v.com/'+map[quality]);
      $('span#pp').html(map[quality]);
     console.log($('source','video#player').attr('src'))
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<div class="dropdown">
 <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Quality
 (<span id="pp"></span>)</button>
 <ul class="dropdown-menu">
   <li><a href="#" onclick="changeQ('fullHD')">FullHD</a></li>
   <li><a href="#" onclick="changeQ('720p')">720p</a></li>
   <li><a href="#" onclick="changeQ('360p')">360p</a></li>
 </ul>
</div>


<video id="player" width="400" controls>
 <source src="http://v.com/1080p" type="video/mp4">

</video>

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

2 个答案: