Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Gelöschtes Mitglied 633957" data-source="post: 2688772">Wollte eigentlich auf jQuery verzichten, das hat aber nicht so geklappt wie gewünscht, daher eine gemischte video.js.Ist halt Quick&amp;Dirty!index.html[HTML]&lt;!DOCTYPE html&gt;&lt;html lang=&quot;de&quot;&gt;&lt;head&gt;&nbsp; &lt;meta charset=&quot;utf-8&quot;&gt;&nbsp; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;&nbsp; &lt;title&gt;Vollbild Overlay mit Video&lt;/title&gt;&nbsp; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;video.css&quot;&gt;&nbsp; &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.min.js&quot;&gt;&lt;/script&gt;&nbsp; &lt;script src=&quot;video.js&quot;&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;ZeigeVideo&quot; style=&quot;display: none;&quot;&gt;&nbsp; &lt;div class=&quot;VideoStyle&quot;&gt;&nbsp; &nbsp; &lt;span class=&quot;Beenden&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;a href=&quot;javascript:VideoContainer(&#039;ZeigeVideo&#039;);&quot;&gt;Video schlie&amp;szlig;en&lt;/a&gt;&nbsp; &nbsp; &lt;/span&gt;&nbsp; &nbsp; &lt;br&gt;&nbsp; &nbsp; &lt;video id=&quot;VideoPlayer&quot; controls autoplay&gt;&nbsp; &nbsp; &nbsp; &lt;source src=&quot;&quot; type=&quot;video/mp4&quot;&gt;&nbsp; &nbsp; &nbsp; Das Video kann in deinem Browser leider nicht abgespielt werden.&nbsp; &nbsp; &lt;/video&gt;&nbsp; &lt;/div&gt;&lt;/div&gt;HIER DER SEITENINHALT MIT LINKS ZU DEN VIDEOS&lt;br&gt;&lt;br&gt;&lt;a href=&quot;javascript:VideoContainer(&#039;ZeigeVideo&#039;); VideoDatei(&#039;video1&#039;);&quot;&gt;Video1 abspielen&lt;/a&gt;&lt;br&gt;&lt;a href=&quot;javascript:VideoContainer(&#039;ZeigeVideo&#039;); VideoDatei(&#039;video2&#039;);&quot;&gt;Video2 abspielen&lt;/a&gt;&lt;/body&gt;&lt;/html&gt;[/HTML]video.js[CODE]function VideoContainer(DivID) {&nbsp; if(document.getElementById(DivID).style.display == &quot;none&quot;) {&nbsp; &nbsp; document.getElementById(DivID).style.display = &quot;flex&quot;; }&nbsp; else {&nbsp; &nbsp; document.getElementById(DivID).style.display = &quot;none&quot;;&nbsp; &nbsp; var video = document.getElementById(&quot;VideoPlayer&quot;);&nbsp; &nbsp; video.pause();&nbsp; }}function VideoDatei(VideoID) {&nbsp; $(&#039;#ZeigeVideo video source&#039;).attr(&#039;src&#039;, VideoID + &#039;.mp4&#039;);&nbsp; $(&quot;#ZeigeVideo video&quot;)[0].load();}[/CODE]video.css[CODE]#ZeigeVideo {&nbsp; position: fixed;&nbsp; right: 0;&nbsp; bottom: 0;&nbsp; min-width: 100%;&nbsp; min-height: 100%;&nbsp; width: auto;&nbsp; height: auto;&nbsp; z-index: 999;&nbsp; background-color: rgba(92, 92, 92, .92);&nbsp; overflow: hidden;}.VideoStyle {&nbsp; width: 50%;&nbsp; display: table;&nbsp; margin: auto auto;}.VideoStyle a {&nbsp; color: White;&nbsp; font-weight: bold;&nbsp; text-decoration: none;}.VideoStyle a:hover {&nbsp; color: Tomato;}.VideoStyle .Beenden {&nbsp; float: right;}video {&nbsp; width: 100% !important;&nbsp; height: auto !important;}[/CODE]In diesem Beispiel liegen alle Dateien im gleichen Ordner, inklusive der beiden MP4-Videos, &quot;video1.mp4&quot; und &quot;video2.mp4&quot;.Der Dateiname des Videos wird in der HTML-Datei mit VideoDatei(&#039;video1&#039;); angesprochen. Die Dateiendung &quot;.mp4&quot; wird in der video.js hinzugefügt.</blockquote>

[QUOTE="Gelöschtes Mitglied 633957, post: 2688772"] Wollte eigentlich auf jQuery verzichten, das hat aber nicht so geklappt wie gewünscht, daher eine gemischte [I]video.js[/I]. Ist halt Quick&Dirty! [B][SIZE=3]index.html[/SIZE][/B] [HTML]<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vollbild Overlay mit Video</title> <link rel="stylesheet" type="text/css" href="video.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="video.js"></script> </head> <body> <div id="ZeigeVideo" style="display: none;"> <div class="VideoStyle"> <a href="javascript:VideoContainer('ZeigeVideo');">Video schließen</a> <video id="VideoPlayer" controls autoplay> <source src="" type="video/mp4"> Das Video kann in deinem Browser leider nicht abgespielt werden. </video> </div> </div> HIER DER SEITENINHALT MIT LINKS ZU DEN VIDEOS <a href="javascript:VideoContainer('ZeigeVideo'); VideoDatei('video1');">Video1 abspielen</a> <a href="javascript:VideoContainer('ZeigeVideo'); VideoDatei('video2');">Video2 abspielen</a> </body> </html>[/HTML] [B][SIZE=3]video.js[/SIZE][/B] [CODE]function VideoContainer(DivID) { if(document.getElementById(DivID).style.display == "none") { document.getElementById(DivID).style.display = "flex"; } else { document.getElementById(DivID).style.display = "none"; var video = document.getElementById("VideoPlayer"); video.pause(); } } function VideoDatei(VideoID) { $('#ZeigeVideo video source').attr('src', VideoID + '.mp4'); $("#ZeigeVideo video")[0].load(); }[/CODE] [SIZE=3][B]video.css[/B][/SIZE] [CODE]#ZeigeVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 999; background-color: rgba(92, 92, 92, .92); overflow: hidden; } .VideoStyle { width: 50%; display: table; margin: auto auto; } .VideoStyle a { color: White; font-weight: bold; text-decoration: none; } .VideoStyle a:hover { color: Tomato; } .VideoStyle .Beenden { float: right; } video { width: 100% !important; height: auto !important; }[/CODE] In diesem Beispiel liegen alle Dateien im gleichen Ordner, inklusive der beiden MP4-Videos, "[I]video1.mp4[/I]" und "[I]video2.mp4[/I]". Der Dateiname des Videos wird in der HTML-Datei mit [I][B]VideoDatei('video1');[/B][/I] angesprochen. Die Dateiendung "[I].mp4[/I]" wird in der [I]video.js[/I] hinzugefügt. [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?