|
|||
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> 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&autoplay=0&mute=1&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(); 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. |
Sponsored Links |
|
|||
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(); } 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. 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> |
Sponsored Links |
|
|||
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. |
|
|||
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. |
|
|||
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 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. |
|
|||
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 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. |
|
|||
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 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? |
|
|||
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? |
|
|||
@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. |
Sponsored Links |
|
|||
Zitat:
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. |
Sponsored Links |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Video soll nur abspielen, wenn DIV eingeblendet ist | Fanello | Javascript & Ajax | 2 | 05.06.2018 09:43 |
HTML5 Video autoplay Problem | Martys | (X)HTML | 2 | 26.06.2014 12:20 |
Var_Dump problem | PHP-Freak | Serveradministration und serverseitige Scripte | 6 | 04.09.2013 12:29 |
Video auf Homepage anzeigen | elizabeth | Grafik, Design, Typografie | 5 | 06.10.2012 00:17 |
HTML5 Video rückwärts abspielen | sweeney | (X)HTML | 3 | 31.07.2011 22:21 |