Antworten auf deine Fragen:
Neues Thema erstellen

HTML5 Video-Player im Pop Up Fenster öffnen lassen. Geht das?

Lenka

Squirrel

Hallo Leute,
ich habe schon bei dem Google mögliche Varianten durch probiert, leider ohne Erfolg.
Hier habe ich auch nichts gefunden, was mich weiterbringen würde.

Das Problem ist folgende:
ich möchte auf einer Webseite das Video anbieten. Bis jetzt klickt man drauf und das Video läuft, man kann es auch im Vollbildformat anschauen. Ich möchte aber, dass das Video, nach dem man auf den Start geklickt hat, in einem Pop Up Fenster geöffnet wird. Im Zentrum soll das Video laufen (im Kleinformat), im Hintergrund soll graue Farbe sein. So wie es üblich bei der Foto-Vergrößerung ist.

Hat jemand eine Idee, wie ich das realisieren kann?

Danke im Voraus für die Mühe.
 

Annihilator

Nicht mehr ganz neu hier

Lege auf die Ursprungsseite ein Bild Deines Videos, vieleicht sogar mit dem Play-Dreieck, ab und verlinke das Bild mit Deinem Popup. Es kann natürlich sein, daß der eine oder andere Popupblockerer diesen Aufruf unterdrückt. Manche Browser öffnen den Link dann auch in einer neuen Registerkarte und nicht in einem neuem Fenster.

Gruß
A
 
G

Gelöschtes Mitglied 633957

Guest

Hat jemand eine Idee, wie ich das realisieren kann?
Wollte eigentlich auf jQuery verzichten, das hat aber nicht so geklappt wie gewünscht, daher eine gemischte video.js.
Ist halt Quick&Dirty!

index.html
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">
    <span class="Beenden">
      <a href="javascript:VideoContainer('ZeigeVideo');">Video schlie&szlig;en</a>
    </span>
    <br>
    <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
<br><br>
<a href="javascript:VideoContainer('ZeigeVideo'); VideoDatei('video1');">Video1 abspielen</a>
<br>
<a href="javascript:VideoContainer('ZeigeVideo'); VideoDatei('video2');">Video2 abspielen</a>

</body>

</html>


video.js
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();
}


video.css
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;
}


In diesem Beispiel liegen alle Dateien im gleichen Ordner, inklusive der beiden MP4-Videos, "video1.mp4" und "video2.mp4".
Der Dateiname des Videos wird in der HTML-Datei mit VideoDatei('video1'); angesprochen. Die Dateiendung ".mp4" wird in der video.js hinzugefügt.
 
Zuletzt bearbeitet von einem Moderator:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben