2. Schritt: Benutzerdefinierte Videosteuerungselemente hinzufügen

Fügen Sie Videosteuerungselemente hinzu, indem Sie benutzerdefinierte Schaltflächen in Ihrem Creative einrichten.

Benutzerdefinierte Schaltflächen zur Video-Wiedergabe hinzufügen

1. Erstellen Sie mithilfe eines <div>-Tags zwei Elemente im Creative. Erstellen Sie die Elemente in der HTML-Datei und passen Sie sie an den Stil der CSS-Datei an. Weisen Sie ihnen dann unterschiedliche IDs und einen Klassennamen zu.
   

   Beispiel für <div>-Tags in der HTML-Datei

   <div id="play-btn" class="video-controls">PLAY</div>
<div id="pause-btn" class="video-controls">PAUSE</div>
<div id="mute-btn" class="video-controls">MUTE</div>
<div id="unmute-btn" class="video-controls">UNMUTE</div>
<div id="stop-btn" class="video-controls">STOP</div>
<div id="replay-btn" class="video-controls">REPLAY</div>

   Beispiel-Stil und ID-Selektor in der CSS-Datei

   .video-controls {
   position: absolute;
   width: 50px;
   height: 20px;
   cursor: pointer;
   background-color: #FFF;
   border: 1px solid #000;
}

#play-btn {
   left: 5px;
}

#pause-btn {
   left: 5px;
}

#mute-btn {
   left: 60px;
}

#unmute-btn {
   left: 60px;
}

#stop-btn {
   left: 115px;
}

#replay-btn {
   left: 115px;
}
2. Fügen Sie Videosteuerungselemente zum JavaScript-Code hinzu.
   
   Ein paar Videofunktionen sind bei HTML5-Videos nicht verfügbar. Achten Sie darauf, hierfür andere Lösungen anzubieten.
   

   • Stummschalten bzw. Lautschalten ist nur auf dem Desktop verfügbar. Bei Mobilgeräten steuert dies die Hardware.
   • Die Stoppmethode ist nicht verfügbar. Halten Sie das Video an und setzen Sie currentTime auf 0, um denselben Effekt zu erreichen.
   • Die Wiederholungsmethode ist nicht verfügbar. Setzen Sie currentTime auf 0 und spielen Sie das Video erneut ab, um denselben Effekt zu erreichen.
   
   

   Code-Snippet

   var playBtn = document.getElementById('play-btn');
var pauseBtn = document.getElementById('pause-btn');
var muteBtn = document.getElementById('mute-btn');
var unmuteBtn = document.getElementById('unmute-btn');
var stopBtn = document.getElementById('stop-btn');
var replayBtn = document.getElementById('replay-btn');

playBtn.addEventListener('click', pausePlayHandler, false);
pauseBtn.addEventListener('click', pausePlayHandler, false);
muteBtn.addEventListener('click', muteUnmuteHandler, false);
unmuteBtn.addEventListener('click', muteUnmuteHandler, false);
stopBtn.addEventListener('click', stopHandler, false);

   replayBtn.addEventListener('click', replayHandler, false);

function pausePlayHandler(e) {
   if (video1.paused) {
       // If paused, then play
       video1.play();
        // Show pause button and hide play button
       pauseBtn.style.visibility = 'visible';
       playBtn.style.visibility = 'hidden';
   } else {
       // If playing, then pause
       video1.pause();
       // Show play button and hide pause button
       pauseBtn.style.visibility = 'hidden';
       playBtn.style.visibility = 'visible';
   }
}

function muteUnmuteHandler(e) {
   if (video1.volume == 0.0) {
       // If muted, then turn it on
       video1.volume = 1.0;
       // Show mute button and hide unmute button
       muteBtn.style.visibility = 'visible';
       unmuteBtn.style.visibility = 'hidden';
   } else {
       // If unmuted, then turn it off
       video1.volume = 0.0;
       // Show unmute button and hide mute button
       muteBtn.style.visibility = 'hidden';
       unmuteBtn.style.visibility = 'visible';
   }
}

function stopHandler(e) {
   // There is no stop method for HTML5 video
   // As a workaround, pause the video
   // and set currentTime to 0
   video1.currentTime = 0;
   video1.pause();
   // Show or hide other video buttons accordingly
}

function replayHandler(e) {
   // There is no replay method for HTML5 video
   // As a workaround, set currentTime to 0
   // and play the video
   video1.currentTime = 0;
   video1.play();
   // Show or hide other video buttons accordingly
}