zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Video je nach Auflösung anzeigen, und mit autoplay abspielen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.11.2021, 22:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.10.2021
Beiträge: 24
Dachlatte befindet sich auf einem aufstrebenden Ast
Standard Video je nach Auflösung anzeigen, und mit autoplay abspielen

Hallo,
um z.B. ein Video auf dem Desktop hochauflösend und auf dem Smartphone mit etwas niedriger Auflösung anzeigen zu lassen hatte ich diesen Code auf meiner Seite eingebaut:
Code:
<video autoplay muted loop id="myVideo">
          <source src="media/DJI_0029_1280.mp4" type="video/mp4">
</video>
<video autoplay muted loop id="myVideoMobile">
          <source src="media/DJI_0029_640.mp4" type="video/mp4">
</video>
..und mit CSS nur das eine oder das andere Video eingeblendet. Macht aber so keinen Sinn da ja beide dennoch geladen werden.

Jetzt hatte ich im Web diesen Code gefunden, etwas angepasst und dann eingebaut:
Code:
// HTML: 
<div id="media"></div>

// JS: 
var med=document.getElementById("media");
var bild='false';
var video='false';
function start(){
   var bre=window.innerWidth;
   var hoch=window.innerHeight;
   if(bre>=600 && bild=='false'){
        med.innerHTML ='';
        console.log('video läd')
        videos();
        bild='true';
        video='false';
   }
   if(bre<=599 && video=='false'){
        med.innerHTML ='';
        console.log('bild läd')
        bild='false';
        video='true';
        bilds();
   }
   function videos(){ 
       ele=document.createElement('video');
       ele.src='media/DJI_0029_1280.mp4&amp;autoplay=0&amp;mute=1&amp;loop=1';
       // ele.src='media/DJI_0029_1280.mp4';
       med.append(ele) 
   }
   function bilds(){
       ele=document.createElement('video'); //  oder img
       // ele.src='media/DJI_0029_640.mp4&autoplay=1&muted=1&loop=1';
       ele.src='media/DJI_0029_640.mp4';
       med.append(ele) 
  }
}

window.addEventListener('resize',function(){
      start();
})

start();
Das Video wird zwar angezeigt mit z.B. src = "media/DJI_0029_640.mp4", aber wenn ich irgendwelche Parameter anhänge wie das oben beispielhaft zu sehen ist, dann wird das Video nicht mehr gefunden.

Wie könnte ich es denn anstellen dass das Video gleich nach dem Laden in einer Endlosschleife abgespielt wird?

Asoo... ob ich hier in diesem Teil des Forums richtig bin weiß ich leider auch nicht genau. Bitte verschiebt das ggf.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.11.2021, 23:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.10.2021
Beiträge: 24
Dachlatte befindet sich auf einem aufstrebenden Ast
Standard

Mit Änderungen in diesem Teil bin ich wieder ein Stück weiter gekommen:

Code:
   function videos(){ 
       ele=document.createElement('video');
       ele.src='media/DJI_0029_1280.mp4';
       med.append(ele);
       document.getElementsByTagName("video")[0].setAttribute ("ID" , "Film");
       document.getElementById("Film").play();   
   }
Jetzt hat das Video-Tag eine ID die ich ansprechen kann und auch vermeintlich play() auführen kann. Es kommt aber diese Fehlermeldung:

Code:
Uncaught (in promise) DOMException: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
Heißt dass, das der Browser es nicht zulässt?
Aber mit dieser ursprünglichen "Lösung" wurde auch immer das Video gleich automatisch abgespielt:

Code:
<video autoplay muted loop id="myVideo">
          <source src="media/DJI_0029_compressed_BesteQualität_1280.mp4" type="video/mp4">
        </video>
	    <video autoplay muted loop id="myVideoMobile">
          <source src="media/DJI_0029_640_compressed.mp4" type="video/mp4">
        </video>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.12.2021, 09:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Dir ist schon bewusst dass Smartphones eine HD (bzw. meist sogar bessere) Auflösung haben als 640px?
"Smartphone" heißt nicht zwangsläufig dass man ein niedrig aufgelöstes Video sehen will, im Gegenteil.
Die meisten HD Videos werden bestimmt auf Smartphones geschaut (Youtube, Netflix) ...
Verwechsel bitte nicht "Smartphone" mit "geringe Auflösung".

Du suchst nach einer Lösung für ein Problem, welches keines ist.
Wenn du die Qualität abhängig von der Bandbreite machen willst (wie es zB Netflix, YouTube, etc. machen) dann ist das hier die Lösung:
https://timbenniks.dev/writings/how-...y-stream-video

Ansonsten kannst du dem User natürlich auch einfach einen Button geben mit welchem er die Auflösung selber einstellen kann.
Aber mach die Auflösung nicht von "mobile Device" abhängig.
Mit Zitat antworten
  #4 (permalink)  
Alt 01.12.2021, 15:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.10.2021
Beiträge: 24
Dachlatte befindet sich auf einem aufstrebenden Ast
Standard

Oh, vielen Dank erst mal!
Und ich dachte ich wäre fast schon am Ende der Erstellung der Homepage angekommen..
Da werde ich mich erst mal einlesen. Ich sehe gerade die "DIY steps for MPEG-DASH" sind offensichtlich für Unix(?). Da muss ich mal schauen ob ich etwas finde womit auch ich arbeiten kann. Bestimmt gibt es da auch ein Tutorial für Windows.
Mit Zitat antworten
  #5 (permalink)  
Alt 01.12.2021, 16:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Das sollte auch in windows funktionieren. Es ist nur leider nicht gerade super einfach (habe es selber auch nie gemacht)

https://ffmpeg.org/download.html

Das kannst du auch für Win runterladen. Dann die Befehle in der Konsole ausführen (eventuell musst du dafür im ffmpeg Verzeichnis sein wenn das nicht richtig in der PATH Variable gesetzt ist)

Code:
ffmpeg -i video.mp4 -an -c:v libx264 -x264opts 'keyint=24:min-keyint=24:no-scenecut' -b:v 5300k -maxrate 5300k -bufsize 2650k -vf 'scale=-1:1080' video-1080.mp4
Das sollte auch auf Win funktionieren.
Einfachere Variante ist eventuell der Quality-Switch wo der User selber die Qualität auswählen kann.
Eventuell gibt es da auch aktuellere Sachen, ich weiß nur dass es mit dynamischer Auflösung funktionieren sollte.
Mit Zitat antworten
  #6 (permalink)  
Alt 08.12.2021, 16:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.10.2021
Beiträge: 24
Dachlatte befindet sich auf einem aufstrebenden Ast
Standard

Ich hab mir das mal angeschaut.
Meine Videos sind ohne Ton, dadurch kann ich mir den einen Schritt sparen.
Wenn ich aber ein Video mit der Zeile
Code:
ffmpeg -i video.mp4 -an -c:v libx264 -x264opts 'keyint=24:min-keyint=24:no-scenecut' -b:v 5300k -maxrate 5300k -bufsize 2650k -vf 'scale=-1:1080' video-1080.mp4
bearbeiten möchte, kommt immer der Fehler "No such filter: 'scale=-1:1080' ".
Und der kommt auch mit anderen Parametern. In die Docu hab ich schon geschaut, das hat mir leider auch nicht geholfen. Tim Benniks habe ich auch schon angeschrieben, aber da kommt leider nichts zurück. Ich bin schon auf der Suche nach jemandem der sich mit dieser Software auskennt, aber das scheint noch etwas zu dauern bis sich da jemand findet.
So wie Tim auf seiner schreibt würden doch hier zum einen die Auflösung geändert werden und gleichzeitig auch Kapitel angelegt werden. Verstehe ich doch richtig?
Gäbe es denn noch eine brauchbare Alternative? Mir ist zwei mal Hand-Brake in die Hände gefallen. Aber hier weiß ich noch nicht ob ich hier auch diese 1-Sekunden-Kapitel anlegen kann.
Mit Zitat antworten
  #7 (permalink)  
Alt 09.12.2021, 10:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Hier würde ich erst einmal folgendes machen:
Binde das Video einmal "ganz normal" ein, in der besten Qualität. Wenn es ein Video ist, welches vom User abgespielt werden muss, dann sollte dem User eigentlich bewusst sein, dass er es bei schlechter Verbindung nicht abspielen soll.
Damit hättest du mal ein Video online.


Dann würde ich mich, je nach Lust und Laune, weiter mit der adaptiven Auflösung befassen.

Was ich bezüglich des Filters gesehen habe:
Code:
ffmpeg -i input.mp4 -vf scale=320:240,setsar=1:1 output.mp4
Laut der Anleitung hier sollte das so funktionieren https://trac.ffmpeg.org/wiki/Scaling (da sind keine '' für scale angegeben.
Eventuell hast du auch eine Version von ffmpeg installiert, die keine Filter mitgeliefert hat. Aber ich gehe davon aus, dass du die aktuelle Version von Download FFmpeg installiert hast?
Mit Zitat antworten
  #8 (permalink)  
Alt 09.12.2021, 17:00
top top ist offline
Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 60
top wird schon bald berühmt werden
Standard

Gerade musste ich an diesen Thread denken als ich zufällig über diesen Artikel gestolpert bin: https://simonhearne.com/2021/fast-responsive-videos/
Vielleicht ist das ja eine einfachere Methode.

Geht es um das Hintergrund-Video der Baumhausseite?
Mit Zitat antworten
  #9 (permalink)  
Alt 10.12.2021, 08:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.10.2021
Beiträge: 24
Dachlatte befindet sich auf einem aufstrebenden Ast
Standard

@top
Vielen Dank! Das hatte ich so schon mal eingebaut, aber davon wurde mir abgeraten weil es dann vielleicht doch nicht die optimale Lösung ist. Ich möchte gerne eine Lösung die sich optimal an die vorhandenen Bedingungen anpasst, auch wenn der Aufwand für mich erst mal beträchtlich ist. Vielleicht hab ich dafür dann auch erst mal meine Ruhe... Aber Danke nochmal!

@cloned
Ja, ein einfaches Video hätte ich ja wenn es schnell gehen muss schnell eingebunden. Das würde schon gehn. Aber ich hab ja noch ein paar Tage Zeit, so lange die Texte der einzelnen Seiten noch nicht überarbeitet sind. Das machen Andere. Den Content muss ich dann nur noch einpflegen.
Die Befehlszeilen die ich gefunden hatte, hatten das scale immer im Hochkomma stehen. Aber vielleicht bin ich da auf Code für Unix-Maschinen gestoßen, dort mag die Syntax anders sein. Auf jeden Fall war der Fehler ohne die Hochkommas weg! Dafür kam dann ein anderer Fehler. Da hab ich dort die anderen Hochkommas auch noch entfernt, und prompt hat es funktioniert und das neue Video wurde angelegt! Das habe ich dann auch gleich für die verschiedenen Auflösungen gemacht, damit ich auf der Homepage dann auch die verschiedenen Auflösungen anbieten kann.
Danach habe ich mir mp4box besorgt um die offensichtlich notwendige Playlist anzulegen, dieses MPD-File.
Neben dem MPD-File wurden mit mp4box noch für jedes Video ein "...dashinit.mp4" angelegt. Diese Files werde ich zusammen auf dem Webserver ablegen und suche jetzt den passenden Video-Player der mit der Playlist dann immer das bestmögliche Video abspielen kann. Aber hier bin ich noch nicht weit gekommen, das ist meine Aufgabe für das Wochenende. Einen Player habe ich schon im Blick. Mal schauen wie weit ich damit komme.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 10.12.2021, 09:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Der Artikel ist zwar von 2021, macht aber den selben Denkfehler wie Dachlatte.
Ein iphone (Hochformat) zB reagiert zwar auf den Breakpoint von 390px Breite, hat aber eine tatsächliche Auflösung von 1170px Breite. Also kann man da ruhig auch ein Video mit 1170px vertikaler Auflösung anzeigen damit es gut aussieht. Das einzige was Sinn macht ist der Ansatz, die Auflösung an die Netzwerkgeschwindigkeit anzupassen (wie es zB auch Netflix und YouTube machen). Das ist aber leider nicht ganz so einfach wie man sich das wünscht (wie man aus dem Thread hier sieht).
Oder eben die Möglichkeit für den User die Qualität selber auszuwählen.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Video soll nur abspielen, wenn DIV eingeblendet ist Fanello Javascript & Ajax 2 05.06.2018 10:43
HTML5 Video autoplay Problem Martys (X)HTML 2 26.06.2014 13:20
Var_Dump problem PHP-Freak Serveradministration und serverseitige Scripte 6 04.09.2013 13:29
Video auf Homepage anzeigen elizabeth Grafik, Design, Typografie 5 06.10.2012 01:17
HTML5 Video rückwärts abspielen sweeney (X)HTML 3 31.07.2011 23:21


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:31 Uhr.