Wie erstelle ich einen HTML/CSS-Code, der eine scrollbare Seitenleiste mit Schaltflächen ermöglicht, um die Quelle eines Videos im Player neben zu ändern?

Question

Hier ist ein Beispiel für das, was ich möchte: https://tvplayer.com/watch nur einfacher als in keine Einschränkungen. Klicken Sie hier, um die Videoquelle fast wie eine YouTube-Wiedergabeliste zu ändern.

Answer 1

Erstens - Sie können Seiteninhalt nicht dynamisch durch HTML und CSS nur ändern. Sie sollten ein wenig von JS verwenden. in unserem Fall ein (check out codepen Beispiel zu sehen, wie es funktioniert):

document.addEventListener('click', function(e) { 
var source = e.target.dataset.source, 
    video = document.getElementById('video'); 
if (source) { 
    video.src = "https://www.youtube.com/embed/" + source; 
    } 
}); 

Dies ist kein perfekter Code, aber guter Ausgangspunkt für Sie, denke ich. Viel Glück :)

Codepen example