変更ビデオ品質

Question

目標：

私はビデオの品質の変更を許可する可能な限り小さなコードをすっきりと制御を実装しようとしています。

設定：以下

は私が与えられていますものです、と私はむしろそれを回避するでしょう。私はあらかじめビルドされたプラグインやjavascript/jqueryのハックを使用していますが、（私またはあなたの）ホイールを改造する（カスタムビデオコントロールスキームを構築する必要があります）最後の結果として。

EDIT：

申し訳ありません。その相関関係を持つことを意味するものではありませんでした。なぜなら、URLはどんな種類のパターンも反映していないからです。私はそれを単純化しました。人々がパターンの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

求めて申し訳ありません。私はそれを自分ですべて解決することができました。それらの瞬間を憎む。

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：ここで私はそれを削除、label属性に基づいて、および<video>要素にそれを前に付ける必要<source>をコピーする必要私が思いついた解決策は、あります

$(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タグは必要ありません。 1つあれば十分ですが、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>