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