HTML Videoplayer inkl. Playlist in Webseite einbinden

[Schnipp]

Hallo zusammen,

ich habe folgendes geplant: in eine Webseite soll ein Videoplayer eingebettet werden. Daneben als Dropdown soll die Auswahl diverser Videoclips stehen, quasi als Playlist, wo durch Auswahl das entsprechende Video abgespielt wird.

Wie setze ich sowas am besten um? Reichen HTML und JS dazu oder muss man auf Drittanbieter-Tools bzw. -Code zurück greifen?

Gruß Schnipp

 

[new Account()]

CSS eventuell noch, damits angenehm aussieht. Mehr brauchst du nicht.

 

[Aslo]

Wenn es viele Videos sind und die Liste dynamisch ist (hinzufügen und entfernen von Clips) würde ich zusätzlich noch auf eine Datenbank und PHP setzen. Ansonsten reichen die von dir genannten Werkzeuge.

 

[ryan_blackdrago]

Videos einbetten und einfach mit Ankern entsprechend verknüfpen (ähnlich hier).

 

[Schnipp]

Also einbinden des Players und gestalten per CSS ist kein Thema. Aber mir ist aktuell noch nicht ganz klar, wie ich die Playlist umsetzen kann: dass per Klick auf die jeweiligen Einträge das entsprechende Video in den Player geladen und abgespielt wird. Jemand einen Tipp für mich?

 

[ryan_blackdrago]

wie bereits gesagt : Verschachteln wäre quick & dirty. Kommt natürlich auf die Menge an Videos an.

 

[Schnipp]

Also es sind schon aktuell ca. 20-25 Videoclips und es werden immer wieder welche dazu kommen. Dann wäre diese Lösung wohl eher suboptimal.

 

[ryan_blackdrago]

@ Schnipp
Da stimme ich zu.
Quick & dirty muß nicht immer optimal sein ^-^
Sollte aber erstmal als Anregung dienen.

 

[Joshinator]

Ist eigentlich kein Hexenwerk. Du machst dir dein video-Element und ersetzt das Source-Kindelement nach einem klick auf das Bild vom entsprechendem Video.

<div class="my-sidebar">
    <div class="video" data-src="katzen-video1.mp4"><img src="katzen-thumbnail.jpg" /></div>
    <div class="video" data-src="katzen-video2.mp4"><img src="katzen-thumbnail.jpg" /></div>
    <div class="video" data-src="katzen-video3.mp4"><img src="katzen-thumbnail.jpg" /></div>
    <div class="video" data-src="katzen-video4.mp4"><img src="katzen-thumbnail.jpg" /></div>
    <!-- wenn es dann ein neues Video gibt hier einen neuen Div erstellen und den richtigen Link hinterlegen -->
</div>
<div>
    <video>
        <source id="my-player" src="irgendein-video.mp4" type="video/mp4">
    </video>
</div>

var videoPlayer = document.getElementById('my-player')
var nodeList = document.querySelectorAll('.my-sidebar>.video');
for (var i = 0; i < nodeList.length; i++) {
    nodeList[i].addEventListener('click', function(event) {
        var newVideoLink = this.setAttribute('data-src');
        videoPlayer.pause();
        videoPlayer.setAttribute('src', newVideoLink);
        videoPlayer.load();
        videoPlayer.play();
    });
}

Sonst: einfach den YouTube Embedded Player nutzen? Der kann auch Playlists und ist eventuell für Laien einfacher zu bedienen falls jemand neben dir mal schnell ein Video hinzufügen soll.

Ergänzung (10. Januar 2019)

Wobei mir grade auffällt das man den HTML5-Videoplayer manuell glaub ich nochmal dazu auffordern muss die Source neu zu laden.

Ergänzung (10. Januar 2019)

Sollte jetzt so funktionieren, nur aus dem Kopf geschrieben und Vanilla JS ist schon was her, aber vom Prinzip her ist das schon alles.
Den videoPlayer-Block solltest du sogar auf

videoPlayer
    .pause()
    .setAttribute('src', newVideoLink)
    .load()
    .play();

kürzen können, ist aber nicht wirklich wichtig.

Für ne YouTube-Playlist brauchst du nur das:

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/videoseries?list=DEINE_PLAYLIST_ID"
    frameborder="0"
    allow="autoplay; encrypted-media"
    allowfullscreen>
</iframe>