更改视频质量指向不同画质的来源

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>