XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Video je nach Auflösung anzeigen, und mit autoplay abspielen (http://xhtmlforum.de/showthread.php?t=74297)

Dachlatte 30.11.2021 21:08

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.

Dachlatte 30.11.2021 22:47

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>


cloned 01.12.2021 08:14

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.

Dachlatte 01.12.2021 14:24

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.

cloned 01.12.2021 15:48

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.

Dachlatte 08.12.2021 15:22

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.

cloned 09.12.2021 09:25

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?

top 09.12.2021 16:00

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?

Dachlatte 10.12.2021 07:49

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

cloned 10.12.2021 08:14

Zitat:

Zitat von top (Beitrag 554992)

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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:53 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2022