JSFiddle - React, Tailwind, and code Playground

HTML

<video id="videoarea" controls="controls" poster="" src=""></video>
<ul id="playlist">
    <li movieurl="http://clubhousetours.com/lund/video/huntington-park.mp4">Lemonade</li>
    <li movieurl="mirror.mp4">Sintel</li>
    <li movieurl="http://clubhousetours.com/lund/video/huntington-park.mp4">Resident Evil</li>
    <li movieurl="http://www.ioncannon.net/examples/vp8-webm/big_buck_bunny_480p.webm">Big Buck Bunny</li>
</ul>

CSS

#playlist {
    display: table;
}
#playlist li {
    cursor: pointer;
    padding: 8px;
}
#playlist li:hover {
    color: blue;
}
#videoarea {
    float: left;
    width: 640px;
    height: 480px;
    margin: 10px;
    border: 1px solid silver;
}

JavaScript

$(function () {
    $("#playlist li").on("click", function () {
        $("#videoarea").attr({
            "src": $(this).attr("movieurl"),
            "poster": "fred",
            "autoplay": "autoplay"
        })
    })
    $("#videoarea").attr({
        "src": $("#playlist li").eq(0).attr("movieurl"),
            "poster": $("#playlist li").eq(0).attr("moviesposter")
    })
})