Javascript Video einbetten

Guten Morgen,
ich möchte ein simples Video in eine Website integrieren.

1. Youtube hatte ich versucht, da funktionieren die Controls im Firefox nicht. Also YouTube-Branding, Vergrößern, Teilen usw. Im Edge wunderbar, im Firefox nicht.

2. Dann habe ich mich mit Js/html5 beschäftigt und folgendes hinbekommen:

<!DOCTYPE html>
<html lang="de"> 
<head>
<style>
.video-container {
position: relative;
width: 640px;
max-width: 100%;
}
video {
width: 100%;
display: block;
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7);
color: white;
border: none;
padding: 15px 20px;
font-size: 20px;
cursor: pointer;
border-radius: 50%;
z-index:66666;
}
</style>
<title>figulaja</title></head>
<body>
<div class="video-container"> 
<video id="video" poster="tnpw.jpg"> 
<source src="./gleichePasswoerter.mp4" type="video/mp4"> 
Dein Browser unterst&uuml;tzt keine HTML5-Videos.
</video>
<button class="play-button" id="playButton">&#9658;</button> 
</div>
	<script>
const video = document.getElementById('video'); 
const playButton = document.getElementById('playButton'); 
playButton.addEventListener('click', () => { 
video.play();
playButton.style.display = 'block'; 
});
video.addEventListener('pause', () => { 

playButton.style.display = 'block'; 
});
</script>
	</body>
	</html>

Das Einzige was ich noch nicht hinbekommen habe, ist das Vergrößern-Icon abzuschalten und das Toggle mit der Pause. Play geht, aber dann kann man das Video nicht anhalten.
3. Versuch

<!DOCTYPE html>
<html lang="de">  
<head>
<style>
.container  {
	padding-top:20px;
  width:100%;
  max-width: 500px;
	margin:0 auto;
  
}

video {width:100%;height:auto;cursor:pointer;}
h3 {text-align:center;}

</style>
<title>figulaja</title></head>
<body>
<div class="container">  
<h3>Click George to Toggle Thinking</h3>
	<video id="george" loop autoplay muted >  
		<source src="gleichePasswoerter.mp4">  
</video>
</div>
		
	<br/><br/><img src="./tnpw.jpg" alt=""/>	  
<script>
// Toggle HTML5 Video Play and Pause on click

$('video').click(function(){  
	// Toggle Magic Here
    this[this.paused ? 'play' : 'pause']();  
});


</script>
	</body>
	</html>

4. Versuch
Jimdo
Da ging es so halb.

Von js habe ich keine Ahnung.
Any idea?
mfG
tsunami

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 672386

Url: https://administrator.de/forum/javascript-video-einbetten-672386.html

Ausgedruckt am: 06.05.2025 um 19:05 Uhr

7 Kommentare

Neuester Kommentar

Moin,

2. Dann habe ich mich mit Js/html5 beschäftigt und folgendes hinbekommen:

Aha.

Du bist knallhart. Schließe doch erstmal deinen alten Thread dazu ab. ;)
Video in HTML einbetten

Gruß

Wie erwähnt: einfach an deine Kollegen der Programmierung wenden:
eikel.edv-dienstleistungen.com/service/programmierungen/

Zitat von @151033:

Moin,

2. Dann habe ich mich mit Js/html5 beschäftigt und folgendes hinbekommen:

Danke fürs anpassen.

Also, wofür nun der Thread hier?

Folgendes habe ich mal zusammengemurkst:

<!DOCTYPE html>
<html lang="de"> 
<head>
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>figulaja</title>
  <style>
    .video-container {
      position: relative;
      width: 640px;
      max-width: 100%;
      margin: 0 auto;
    }

    video {
      width: 100%;
      height: auto;
      display: block;
      background: black;
      outline: none;
    }

    .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      border: none;
      padding: 15px 20px;
      font-size: 24px;
      cursor: pointer;
      border-radius: 50%;
      z-index: 10;
      transition: opacity 0.3s ease;
    }

    .play-button.hidden {
      opacity: 0;
      pointer-events: none;
    }
  </style>
</head>
<body>

<div class="video-container"> 
  <video id="video" preload="metadata" poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png"> 
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"> 
    Dein Browser unterstützt keine HTML5-Videos.
  </video>
  <button class="play-button" id="playButton">&#9658;</button> 
</div>

<script>
  const video = document.getElementById('video'); 
  const playButton = document.getElementById('playButton'); 

  playButton.addEventListener('click', () => { 
    if (video.paused || video.ended) {
      video.play();
    } else {
      video.pause();
    }
  });

  video.addEventListener('play', () => { 
    playButton.classList.add('hidden'); 
  });

  video.addEventListener('pause', () => { 
    playButton.classList.remove('hidden'); 
  });

  video.addEventListener('ended', () => { 
    playButton.classList.remove('hidden'); 
  });

  video.addEventListener('click', () => { 
    if (!video.paused) {
      video.pause();
    }
  });
</script>

</body>
</html>

Ob das deinen Anforderungen entspricht, kann ich aus deiner Anfrage nicht rauslesen.

Gruß

Ps.: Wieso werbt Ihr eigentlich damit, dass Ihr alles von Hand entwickelt und kommt dann mit so trivialen Dingen in ein IT-Forum?
Pps.: Doppelaccounts stinken.

Vielen Dank erstmal. So in etwa hatte ich mir das vorgestellt.

Ich bin eigendlich im php/mysql Bereich zuhause. Wie gesagt, von js keine Ahnung.
Ok, Alert und onklick , das wars aber schon fast.
mfG

So in etwa hatte ich mir das vorgestellt. face-smile

Klingt gut.

mfG

Anfrage/Problem/Thread gelöst?

Gruß

Nicht ganz. Ich kann auf das ganze Video klicken zwecks Pause. Aber das könnte verwirren.
Schön wäre ein Pause Button.

Irgendwie sowas wie

if(video.play())
<button class="play-button" id="pauseButton">&#23F8;</button>  
else
<button class="pause-button" id="playButton">&#9658;</button>  

mfG

Bitte, gerne.

<!DOCTYPE html>
<html lang="de"> 
<head>
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>figulaja</title>
  <style>
    .video-container {
      position: relative;
      width: 640px;
      max-width: 100%;
      margin: 0 auto;
    }

    video {
      width: 100%;
      height: auto;
      display: block;
      background: black;
      outline: none;
    }

    .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      border: none;
      padding: 15px 20px;
      font-size: 24px;
      cursor: pointer;
      border-radius: 50%;
      z-index: 10;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    .video-container:hover .play-button {
      opacity: 1;
      pointer-events: auto;
    }

    .play-button:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
  </style>
</head>
<body>

<div class="video-container"> 
  <video id="video" preload="metadata" poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png"> 
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"> 
    Dein Browser unterstützt keine HTML5-Videos.
  </video>
  <button class="play-button" id="playButton">&#9658;</button> 
</div>

<script>
  const video = document.getElementById('video'); 
  const playButton = document.getElementById('playButton'); 

  function updateButtonSymbol() {
    playButton.innerHTML = video.paused ? '&#9658;' : '&#10073;&#10073;'; 
  }

  playButton.addEventListener('click', () => { 
    if (video.paused || video.ended) {
      video.play();
    } else {
      video.pause();
    }
    updateButtonSymbol();
  });

  video.addEventListener('play', updateButtonSymbol); 
  video.addEventListener('pause', updateButtonSymbol); 

  video.addEventListener('ended', () => { 
    video.currentTime = 0;
    video.play();
    updateButtonSymbol();
  });

  video.addEventListener('click', () => { 
    if (!video.paused) {
      video.pause();
      updateButtonSymbol();
    }
  });
</script>

</body>
</html>