• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

HTML5 Video Auflösung über Javascript skalierbar

karthos

Neues Mitglied
Hallo,

ersteinmal hoffe ich dass ich hier das richtige unterforum für meine Frage gewählt habe.

Zweitens zu meinem Problem:

Ich möchte auf meiner Vereinswebsite (gehostet bei Strato über WebBasic) einige Video stellen. Nun möchte ich dass diese Videos skalierbar sind (2-3 Videodateien in Verschiedener Auflösung und Bitrate). Desweiteren möchte ich dass, wenn man zu einer anderen Qualität wechselt das Video an der gleichen Stelle weiterläuft, an der vom anderen Video aus gestoppt wurde. Nun habe ich bereits folgenden Code:
HTML:
<!DOCTYPE html>
<html>
<body>


<button id="1" onclick="myFunction()" type="button">SD</button>
<button id="2" onclick="myFunction1()" type="button" disabled>HD</button>
<button id="3" onclick="myFunction2()" type="button">UHD</button>

<video id="Video1" controls="controls" width="100%" height="100%" preload="metadata">
  <source id="mp4_src" src="Video2.webm" type="video/webm">
  Your browser does not support HTML5 video.
</video>

<script>

var v = document.getElementById('Video1');
v.addEventListener('canplaythrough', function(e) {
  console.log(e.type, this.seekable.end(0));
});
time = 1;
var vid = document.getElementById("Video1");

function myFunction() {
    time=vid.currentTime;
    document.getElementById("mp4_src").src = "Video1.webm";
    document.getElementById("Video1").load();
    document.getElementById("1").disabled = true;
    document.getElementById("2").disabled = false;   
    document.getElementById("3").disabled = false;
    intervalCode = setInterval(function (){
        if ( vid.readyState === 4 ) {
        setTimeout(function (){     
        vid.currentTime=time;
        clearInterval(intervalCode);
        }, 300);
        }
        }, 400);

}
function myFunction1() {
    time=vid.currentTime;
    document.getElementById("mp4_src").src = "Video2.webm";
    document.getElementById("Video1").load();
    document.getElementById("2").disabled = true;
    document.getElementById("1").disabled = false;     
    document.getElementById("3").disabled = false;
    intervalCode1 = setInterval(function (){
        if ( vid.readyState === 4 ) {
        setTimeout(function (){     
        vid.currentTime=time;
        clearInterval(intervalCode1);
        }, 300);
        }
        }, 400);
  
}
function myFunction2() {
    time=vid.currentTime;
    document.getElementById("mp4_src").src = "Video3.webm";
    document.getElementById("Video1").load();
    document.getElementById("2").disabled = false;
    document.getElementById("1").disabled = false;     
    document.getElementById("3").disabled = true;
    intervalCode2 = setInterval(function (){
        if ( vid.readyState === 4 ) {
        setTimeout(function (){     
        vid.currentTime=time;
        clearInterval(intervalCode2);
        }, 300);
        }
        }, 400);
  
}
</script>
</body>
</html>

Problem an der Sache ist, dass es nur manchmal funktioniert.(Manchmal ist das neue Video scheinbar nicht schnellgenug geladen um an eine Bestimmte Stelle zu springen) Nun meine Frage(n)

1. Wie kann ich den Code optimieren, dass er immer funktioniert ?
2. Wieso kann ich bei Chrome nicht zu einer bestimmten Stelle im Video springen ? (Weder als webm (VP8), noch als MP4(AVC)) (Bei Firefox funktioniert MP4 nicht)
3. Ist der Server Geschwindigkeitstechnisch zu langsam ?

Vielen Dank schonmal im vorraus :)
 
Werbung:
Hallo karthos,
ich habe da schon so eine Idee, allerdings habe ich jetzt nicht mehr viel zeit, dass heißt, ich schicke dir den Lösungsvorschlag heute abend. ;-)

Vielen Dank, dass du so viel geduld hast.
 
Werbung:
<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);

</script>

/\
probiere es mal da mit |

normal müsste es bei Chrome funktionieren
kann aber sein, dass es auch erst ab Chrome 4.0 funktioniert.
 
????? he? Mich verwirrt das gerade etwas.
@mixtur4f erklär mir mal bitte wie das funktionieren soll das dein Code den TE helfen soll?

Aber @karthos
Du schriebst
3. Ist der Server Geschwindigkeitstechnisch zu langsam ?
Vor 20 Jahren hätte ich gesagt ja,das könnte ein problem sein. Heut zu Tage würde ich das mal ausschließen ,ich kenne keine Server die heute noch solche problem machen. Kann zwar sein aber glaube ehr nicht
 
Zuletzt bearbeitet:
Werbung:
Desweiteren möchte ich dass, wenn man zu einer anderen Qualität wechselt das Video an der gleichen Stelle weiterläuft, an der vom anderen Video aus gestoppt wurde.
Das ist ja eigentlich das Problem des TOs. Eventuell sollten wir das dann auch lösen!

https://jsfiddle.net/q0jjokps/3/
So funktioniert es einwandfrei.
Falls du fragen zum Code hast, bzw. ihn nicht verstanden (ich habe hier schließlich JQuery anstatt Vanilla JS verwendet), dann frag einfach.
Und falls ich was falsch verstanden habe, korrigier mich bitte.

Edit:
Falls du mein Beispiel verwenden solltest, hier noch eine kleine Info.
Bei den Buttons, siehst du den Attribut data-source. Dort musst du jetzt dein entsprechendes Video einbinden, also das Video für SD, HD und UHD. Den Rest regelt JQuery.
 
Zuletzt bearbeitet:
1. Wie kann ich den Code optimieren, dass er immer funktioniert ?
Nun ja, du da gibt es viele Sachen. Schau dir deinen Code doch mal an:
Javascript:
var v = document.getElementById('Video1');
v.addEventListener('canplaythrough', function(e) {
  console.log(e.type, this.seekable.end(0));
});
time = 1;
var vid = document.getElementById("Video1");

function myFunction() {
    time=vid.currentTime;
    document.getElementById("mp4_src").src = "Video1.webm";
    document.getElementById("Video1").load();
    document.getElementById("1").disabled = true;
    document.getElementById("2").disabled = false; 
    document.getElementById("3").disabled = false;
    intervalCode = setInterval(function (){
        if ( vid.readyState === 4 ) {
        setTimeout(function (){   
        vid.currentTime=time;
        clearInterval(intervalCode);
        }, 300);
        }
        }, 400);

}
function myFunction1() {
    time=vid.currentTime;
    document.getElementById("mp4_src").src = "Video2.webm";
    document.getElementById("Video1").load();
    document.getElementById("2").disabled = true;
    document.getElementById("1").disabled = false;   
    document.getElementById("3").disabled = false;
    intervalCode1 = setInterval(function (){
        if ( vid.readyState === 4 ) {
        setTimeout(function (){   
        vid.currentTime=time;
        clearInterval(intervalCode1);
        }, 300);
        }
        }, 400);

}
function myFunction2() {
    time=vid.currentTime;
    document.getElementById("mp4_src").src = "Video3.webm";
    document.getElementById("Video1").load();
    document.getElementById("2").disabled = false;
    document.getElementById("1").disabled = false;   
    document.getElementById("3").disabled = true;
    intervalCode2 = setInterval(function (){
        if ( vid.readyState === 4 ) {
        setTimeout(function (){   
        vid.currentTime=time;
        clearInterval(intervalCode2);
        }, 300);
        }
        }, 400);

}
Da ist ja alles Doppelt gemoppelt.

Mein obiges Beispiel verwendet Jquery. Aber ich werde den Spaß jetzt auch nochmal in normalem JS machen:
https://jsfiddle.net/3pq775z3/

Ist vom Prinzip her das gleiche und ist auch nicht viel länger.
Es gibt nur ein paar Unterschiede zum Auswählen der Objekte mit Loops.
Tendenziell würde ich aber zu JQuery tendieren, es ist halt einfach in einigen Sachen besser, kürzer und vor allem unkomplizierter.
Das mit den Loops treibt mich jedes mal wieder zur Weißglut wenn ich mit Vanilla JS arbeite.

Edit:
Und was das Thema Loops angeht, sind wir auch schon bei der Lösung zum kürzen des Codes.
Du machst für jeden einzelnen Button eine Funktion, anstatt einfach alle gleichzeitig auszuwählen. Ich schätze mal, mit Loops hast du dich noch nicht wirklich befasst.
Code:
    document.getElementById("2").disabled = false;

    document.getElementById("1").disabled = false;   

    document.getElementById("3").disabled = true;
Das hier z.B. wird per Loop zu dem hier:
Code:
    for (i = 0; i < document.querySelectorAll(".scale").length; ++i) {
      document.querySelectorAll(".scale")[i].removeAttribute("disabled");
    }
    this.setAttribute("disabled", "");
Bei 3 Buttons macht das keinen Unterschied von der Länge her, allerdings kannst du jetzt so viele Buttons wie du möchtest hinzufügen, ohne eine einzige Zeile Code hinzufügen zu müssen. Es ist also ein Gefallen für dich.
Dieses Schema kannst du auf jede Zeile deines Codes anwenden.
Ich hoffe ich konnte dir da weiterhelfen.
 
Werbung:
Servus,

Danke erst mal für die ganzen Antworten :). Ich probiere heute Abend mal die Lösungsvorschläge durch :)
 
Also habs doch jetzt probiert. Also das springen per se funktioniert mit dem Code von Aaron3219 sehr gut (verwende im Moment die Vanilla JS Version). Problem ist jetzt allerdings dass mein Testvideo ca. 20 Minuten lang ist.Ich bekomme im Firefox das Ergebis, dass das Video einige Minuten lang lädt bevor dann so ca. die Hälfte gepuffert ist. Ich kann auch nur in diesem Bereich suchen. Wenn ich in den nicht geladenen Bereich klicke springt mir da Video nur zum Ende des gepufferten Bereichs. Ich füg mal ein Bild an dass man sich das besser Vorstellen kann. Liegt das an der Codierung des Videos? Habe eins als mp4 mit Handbrake konvertiert. (Mp4 x264 Web optimized). Das zweite ist webm (vp9) mit FormatFactory und das dritte ist webm (vp8) mit FormatFactory. Gibts da ein Programm dass man dafür empfehlen kann?

Browser.jpg
 
Ich bekomme im Firefox das Ergebis, dass das Video einige Minuten lang lädt bevor dann so ca. die Hälfte gepuffert ist. Ich kann auch nur in diesem Bereich suchen. Wenn ich in den nicht geladenen Bereich klicke springt mir da Video nur zum Ende des gepufferten Bereichs. Ich füg mal ein Bild an dass man sich das besser Vorstellen kann. Liegt das an der Codierung des Videos? Habe eins als mp4 mit Handbrake konvertiert. (Mp4 x264 Web optimized). Das zweite ist webm (vp9) mit FormatFactory und das dritte ist webm (vp8) mit FormatFactory.
Naja, solange das Video jetzt nicht 10 mal so groß ist, wie es eigentlich sein könnte, sollte es keinen Unterschied machen.
Ich habe es jetzt gerade einmal selber mit Firefox, Chrome, Edge und IE ausprobiert, mit einem 30 minuten Video, so wie du.
Bei mir ist alles einwandfrei und ich habe keine Ladezeit.

Jetzt zweifle ich langsam an deiner Internetleitung. Was für eine Bandbreite hast du denn eigentlich?
Ich sag mal so: Alte 5000 Verträge usw. stoßen natürlich schnell an ihre Grenzen.
 
Zuletzt bearbeitet:
Werbung:
Habe eine Vodafone Kabelleitung mit 100.000 :confused:
Größe der Datei liegt zwischen 70MB webm und ca 1,5GB UHD mp4
 
Bei 1,5 gb und einer 100 ter Leitung mußt du bei voller Auslastung mindest 2-3 Minuten Puffern bis das Video Komplett da ist
 
Interessant...

Tja ich hab mir jetzt einfach mal die Mühe gemacht und ein Video in 4k (60fps - ca. 1GB) gerendert mit ungefähr 10 Minuten länge.
Dennoch kann ich keine erheblich längeren Ladezeiten feststellen...

Edit:
Es ruckelt aber manchmal... Aber HD funktioniert wirklich Problemlos und einwandfrei.

Bei 1,5 gb und einer 100 ter Leitung mußt du bei voller Auslastung mindest 2-3 Minuten Puffern bis das Video Komplett da ist
Ja, aber er sollte ja auch schneller Laden, als man sich das Video anschaut und außerdem sollte das hin und her skippen im Video ebenfalls kein Problem darstellen.
 
Zuletzt bearbeitet:
Werbung:
Ich habs localhost gemacht... das klammert natürlich den Faktor Server aus.
Ich probiers mal auf einem meiner gekauften Server (1&1).

Edit:
Also ich habs mal ausprobiert, aber die gleichen Ergebnisse erhalten:
4K ruckelt alle paar Sekunden, HD funktioniert einwandfrei.
 
So also danke für eure Antworten. Ich bin nun mal zum Schluss gekommen, nachdem ich es auch mit Localhost probiert habe - und siehe da es funktioniert - dass es offenbar doch Serverseitige einschränkungen gibt :S
 
Werbung:
Habe gerade mal Chrome geupdatet, kann aber immernoch nicht springen in Chrome :|. Allerdings lädt Chrome deutlich schneller.

Edit: kann es sein das Edge gar kein webm kennt ?
 
Zurück
Oben