HTML5 Video Player ohne Controls – aber mit eigenem Play-Overlay

Video Play-Overlay

Video Play-Overlay - Illustration/Montage: T.Bortels/cpu20.de

Als erstes kann man natürlich fragen, warum sollte man einen eigenen HTML5 Video Player verwenden wollen – und dann auch noch ohne Controls – aber mit eigenem Play-Overlay? Am einfachsten wäre es doch sicherlich, ein Video per Vimeo oder YouTube in eine Webseite einzubinden. Man kopiert einfach den embed-Code und fertig ist die Hütte. Aber wie das aussieht? Naja – meistens eben so, wie sich die Damen und Herren von Vimeo und YouTube vorstellen – und diese Vorstellung kann schon mal von den eigenen Vorstellungen abweichen.

Wenn man auch das Design auf der Webseite gezeigten Videos – also das Design des Video Players kontrollieren möchte ist es in jedem Falle hilfreich zu wissen, wie man einen eigenen HTML5 Video Player baut.

In diesem Beispiel beschränken wir uns dabei allerdings zunächst mal auf das Weglassen der Bedienelemente (Controls – z.B. Play-Button, Ladebalken, Lautstärke, Fullscreen-Button etc.) und wollen stattdessen nur einen Play-Button bzw. von der Funktion her einen Play-Pause-Button als Overlay über das Startbild legen. Und das ist gar nicht mal so schwierig, wie die Einleitung vielleicht vermuten läßt. Los geht’s.

Eigener Play-Pause-Button für HTML5 Video Player

Zunächst bauen wir mal den HTML5 Video Player ein – also den Code, der dafür sorgt, dass der Standard-Player angezeigt wird, der vom jeweiligen Browser angeboten wird, wenn er das HTML5 Tag „video“ interpretiert. Damit haben wir dann bereis einen voll funktionsfähigen HTML5 Video Player, der per CSS auch ein responsiver Player sein kann. Allerdings werden zunächst entweder gar keine Bedienelemente angezeigt, oder alle – und diese sind dann natürlich im Design des jeweiligen Browsers.

<video autobuffer controls>
    <source src="/files/video.mp4" type="video/mp4" >
</video>

Der erste Parameter „autobuffer“ sorgt dafür, dass das Video geladen wird, sobald es zu sehen ist. Der zweite Parameter „controls“ sorgt dafür, dass die Standard-Bedienelemente angezeigt werden.

Um nun die Standard-Controls gegen einen Play-Pause-Overlay auszutauschen, geht man am besten wie folgt vor: Das Video muss zunächst in einen Container umziehen, der dann das Overlay für die Play-Pause-Funktion beinhaltet. Dann verstecken wir die Standard-Video-Controls per JavaScript bzw. jQuery und regeln die Play- und Pause-Funktionen ebenfalls über Javascript. So können auch Nutzer, die kein JavaScript aktivert haben, den Player weiterhin problemlos über die Standard-Controls bedienen.

Hier erstmal das HTML:

<div class="video_wrapper">
<video autobuffer controls>
    <source src="/files/video.mp4" type="video/mp4" >
</video>
<div class="playpause"></div>
</div>

Und hier der dazu passende JavaScript-bzw. jQuery-Code, der die Play-Pause-Funktion regelt und die Standard-Bedienelemente versteckt:

<script>
jQuery('.video').parent().click(function () {
    if(jQuery(this).children(".video").get(0).paused){
        jQuery(this).children(".video").get(0).play();
        jQuery(this).children(".playpause").fadeOut();
    }else{
       jQuery(this).children(".video").get(0).pause();
        jQuery(this).children(".playpause").fadeIn();
    }
});

var vids = jQuery("video"); 
jQuery.each(vids, function(){
       this.controls = false; 
}); 
</script>

Nun fehlt nur noch das CSS, das unser Play-Pause-Bild als Overlay auf den Player zaubert:

.video {
    width: 100%;
    height: auto;
    border: none;
}

.video_wrapper{
    display:table;
    width:auto;
    position:relative;
    width:100%;
    cursor:pointer;
}

.playpause {
    background-image:url(img/play-icon.png);
    background-repeat:no-repeat;
    width:35%;
    height:35%;
    position:absolute;
    left:0%;
    right:0%;
    top:0%;
    bottom:0%;
    margin:auto;
    background-size:contain;
    background-position: center;
}

Auf iOS Geräten (iPhone, iPad) wird automatisch ein Play-Overlay angezeigt, das das Design unseres Play-Overlay natürlich stören würde. Zu guter letzt also noch ein CSS-Schnippsel, der verhindert, dass das iOS-Player-Overlay angezeigt wird:

video::-webkit-media-controls-start-playback-button {
  display: none;
}

Das war’s. Viel Spaß damit!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.


Time limit is exhausted. Please reload CAPTCHA.