ändert Videoqualität mit Quellen zeigen auf verschiedene Qualitäts Versionen

Question

Ziel:

Ich versuche, eine Kontrolle mit möglichst wenig Code Krempel wie möglich zu implementieren, die der Änderung der Qualität eines Videos ermöglicht. Einstellungen

:

Hier finden Sie, was mir gegeben wird, und ich würde lieber drum herum arbeiten. Ich bin offen für die Verwendung von vorgefertigten Plugins oder einem Javascript/Jquery-Hack, aber würde lieber nicht für eine Lösung gehen, die (ich oder Sie) das Rad neu zu erfinden (erfordern die Erstellung eines benutzerdefinierten Video-Steuerschema), aber würde es nehmen als letztes Ergebnis.

EDIT:

Es tut uns leid. Ich wollte diese Korrelation nicht haben, da die URLs keinerlei Muster enthielten. Ich habe es zu stark vereinfacht und nicht angenommen, dass die Leute die URLs nach einem Muster betrachten würden. Aber danke für diesen Start, da kann ich wahrscheinlich damit arbeiten. Entschuldigung nochmal. Ich werde die URLs ändern, um kein Muster zu haben.

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

Vielen Dank im Voraus für jeden, der etwas Einblick geben kann.

Answer 1

Es tut uns zu fragen. Es stellte sich heraus, dass ich es alleine sehr gut lösen konnte. Hasse diese Momente. Hier ist die Lösung kam ich mit, die nur die <source> Ich brauche Kopieren beinhaltet auf der Grundlage der label Attribut, es zu löschen, und das Voranstellen in das <video> Element:

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

Obwohl dies nicht meine Absicht war, ich hoffe, meine Antwort von nutzen ist . Entschuldige nochmal, dass du gefragt hast, bevor du darüber nachdenkst.

Answer 2

Sie brauchen nicht viele source Tags. Eins ist genug, aber Sie müssen den Wert source Attribut ändern, das src ist.

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>