Video einbinden und Video als Hintergrund

Pitwheazle · Donnerstag 15. Dezember 2022, 19:33

Ich bin ja Dank euren Hilfen schon viel weiter gekommen und habe schon wieder Ideen:
Ich habe einen Film zu meinem Rechentrainer (dem alten Rechentrainer) erstellt, der liegt auch auf YouTube und hat das Format .m4.
Ich kann den Film als Link auf YouTube einbinden, das klappt. Aber Einbinden von YouTube Filmen bedarf wieder eines Eintrags beim Datenschutz - und überhaupt!
Ich möchte den Film lokal einbinden. Ich habe auch Anleitungen gefunden, wie das geht, wenn er auf einem Server liegt. Es ist mir aber nicht gelungen ihn lokal einzubinden. Ich vermute, ich mache was mit der Adresse falsch?
Ich bekomme auf einem grauen Rechteck den Hinweis: "Kein Vdeo mit unterstütztem Format und MME-Typ gefunden."
Außerdem habe ich auch noch einen Film für einen Hintergrund geschnitten. Auch hier gelingt es mir mein YouTube Video als Hintergrund einzubinden, eine lokale Kopie nicht.
Ich hoffe das hier reicht als Code:

Code: Alles auswählen

    <div style="position: fixed; z-index: -99; width: 100%; height: 100%">
        <iframe frameborder="0" height="100%" width="100%" src="https://www.youtube.com/embed/LNDCBQRR2GY?autoplay=1&controls=0&loop=1&rel=0&showinfo=0&autohide=1&wmode=transparent&hd=1"></iframe>
        </div>
        <div id="main">     
    <h2> Willkommen zur RechentrainerApp!</h2>
    <video 
        src="/Hintergrund.mp4" width=320  height=240 controls poster="vorschaubild.jpg">
    </video>

sparrow · Donnerstag 15. Dezember 2022, 19:41

Ob die Adresse stimmt, siehst du ja, wenn du versuchst die aufzurufen.
Also Domain/Hintergrund.mp4
Wenn du das also mit dem Django-Development-Server machst: http://127.0.0.1:8000/Hintergrund.mp4

Sirius3 · Donnerstag 15. Dezember 2022, 20:16

Wie man auf statische Dateien verlinkt, solltest Du ja inzwischen eigentlich wissen. Videos sind ja nichts anderes als CSS-Dateien oder Bilder.

Pitwheazle · Freitag 16. Dezember 2022, 15:14

sparrow hat geschrieben: ↑Donnerstag 15. Dezember 2022, 19:41 Ob die Adresse stimmt, siehst du ja, wenn du versuchst die aufzurufen.
Also Domain/Hintergrund.mp4
Wenn du das also mit dem Django-Development-Server machst: http://127.0.0.1:8000/Hintergrund.mp4

Gut zu wissen ... wenn ich das mache, bekomme ich die Fehlermeldung mit den urls die Django durchprobiert.

Sirius3 hat geschrieben: ↑Donnerstag 15. Dezember 2022, 20:16 Wie man auf statische Dateien verlinkt, solltest Du ja inzwischen eigentlich wissen. Videos sind ja nichts anderes als CSS-Dateien oder Bilder.

Das sagst du einfach so. Ich bin geistig blond und schon etwas dement. Ich habe bisher keine Grafiken per Link eingebunden, meine Grafiken werden alle mit svg erzeugt. Ich kann exteren Links öffnen und Stylsheets binde ich z.B. mit

Code: Alles auswählen

<link rel="stylesheet" href="{% static 'styles.css' %}">

ein - keine Ahnung, wie ich das abwandeln könnte. Und nahezu alle Hinweise im Internet zum Einbinden sagen, am Einfachsten sei es mit youTube und das war's dann.
In welchen Ordner muss er denn (ich habe verschiedene ausprobiert) - jetzt z.B. habe ich in meinen App-Ordner einen Unterordner "Video" angelgt und den Film da rein gepackt. Geht nicht.
Beim Hintergrund kommt die Meldung, dass Firefox dieses eingebundene Video nicht öffnen darf und es auf einer neuen Seite geöffnet werden muss (geht aber auch nicht). Und bei dem eingebetteten Video kann ich im Inspektor den Rahmen sehen, passiert aber auch sonst nix.

Code: Alles auswählen

<body>
    <div style="position: fixed; z-index: -99; width: 100%; height: 100%">
        <iframe frameborder="0" height="100%" width="100%" src="/video/hintergrund.mp4"> </iframe>
    </div>
    <div id="main">     
        <h2> Willkommen zur RechentrainerApp!</h2>
        <video width=320  height=240 autoplay>
            <source src="/video/hintergrund.mp4"  type="video/mp4">
        </video> 
    </div>
</body>

sparrow · Freitag 16. Dezember 2022, 15:20

Dann sind die Stichworte "statische Dateien" bzw. "static" im Bezug auf Django.
Das musst du auffrischen. Du machst das ja bereits mit css - Dateien, wie du hier gerade zeigst.

Wenn du das in deine Seite einbaust, wird da intern auch nur von deinem Browser aus ein HTTP-Request an den Webserver geschicht.
Deshalb auch der Test über den Aufruf der URL im Browser.
Das wird so auch mit der stylesheets.css gemacht.
Du musst das also analog mit anderen statischen Dateien machen - in diesem Fall mit dem Video.

Pitwheazle · Freitag 16. Dezember 2022, 17:36

Prima, das hat mir weitergeholfen. Dazu musste ich zunächst mal realisieren, dass der Ordner "static" nicht nur die css Dateien enthält sondern die lokalen Daten(?).
Eins klappt noch nicht, der Film im Hintergrund startet nicht selbst. Es startet erst wenn man irgendwo auf das Video klickt und dazu muss man auch noch auf einen Teil davon klicken, der nicht transparent verdeckt wird - die Option "autoplay" habe ich eingefügt.

Das eingebettete Video funktioniert jetzt auch. Die erste Version war noch im mp2 Format codiert, da wurde nur der Ton abgespielt. Da hätte ich jetzt gerne, dass man das Video ein und ausblenden kann, das habe ich jetzt mit <detail> ... gelöst, was Besseres ist mir nicht eingefallen.

Code: Alles auswählen

<body>
    <div style="position: fixed; z-index: -99; width: 100%; height: 100%">
        <video height="100%" width="100%" controls autoplay loop>
            <source src="static/hintergrund.mp4" type="video/mp4"></source>
        </video>
    </div>
    <div id="main">     
...
        <details>
            <summary>Hier gibt es einen Film zum Rechentrainer</summary>
            <video width="320" height="270" controls>
                <source  src="static/rechentrainerfilm.mp4" ></source>
            </video>
        </details>
...
</body>

Pitwheazle · Samstag 17. Dezember 2022, 15:20

Pitwheazle hat geschrieben: ↑Freitag 16. Dezember 2022, 17:36 Eins klappt noch nicht, der Film im Hintergrund startet nicht selbst.

Also das Geheimnis scheint gelöst zu sein. Bei mozilla finde ich:

Firefox blockiert standardmäßig automatisch alle Medien, die Audio-Inhalte abspielen.

und für Safari:

Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS—the user always initiates playback.

noisefloor · Samstag 17. Dezember 2022, 16:45

Hallo,

> dass der Ordner "static" nicht nur die css Dateien enthält sondern die lokalen Daten(?).
Nee, die statischen Dateien. Als Abgrenzung zu den Templates, deren Inhalt ja zur Laufzeit bei Abruf der Seite gerendert und ausgeliefert wird. Oder anders ausgedrückt: Templates -> dynamisch; CSS, JS, Bilder, Videos etc -> statisch.

Gruß, noisefloor

Pitwheazle · Samstag 17. Dezember 2022, 16:49

OK, so habe ich es jetzt auch verstanden.