JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hozierWorkSong" class="mediaAudioFacade" data-sources="http://ge.tt/api/1/files/21ju0H92/0/blob?download" data-start="10" data-end="15">Hozier - Work Song</div>

<div class="mediaJumper" data-id = "hozierWorkSong" data-time = "46">"There is nothing sweeter than my baby.." [0:46]</div>

<div class="mediaJumper" data-id = "hozierWorkSong" data-time = "100">"I swear I thought I dreamed her.." [1:40]</div>

<div class="mediaJumper" data-id = "hozierWorkSong" data-time = "108">"(chorus) When. my. time comes around.." [1:48]</div>

<div id="hozierFromEdenSong" class="mediaVideoFacade" data-sources="http://ge.tt/api/1/files/6IFiBH92/0/blob?download">Hozier - From Eden</div>

<div class="mediaJumper" data-id = "hozierFromEdenSong" data-time = "72">"No who cares, no vacant stares, no time for me.." [1:12]</div>

<div class="mediaJumper" data-id = "hozierFromEdenSong" data-time = "79">"Honey, you're familiar like my mirror years ago.." [1:19]</div>

<div class="mediaJumper" data-id = "hozierFromEdenSong" data-time = "104">"I slithered here from Eden just to sit outside your door.." [1:44]</div>

CSS

.mediaAudio, .mediaAudioFacade {
    width:350px;
    height:30px;
    margin-bottom:10px;
}

.mediaAudioFacade {
    cursor:pointer;
    font-family:Arial;
    color:lightblue;
    font-weight:bold;
    border:1px solid lightblue;
}

.mediaAudioFacade img{
    display:inline-block;
    height:inherit;
    vertical-align:middle;
}

.mediaAudioFacade span{
    display:inline-block;
    vertical-align:middle;
    font-size:0.9em;
}

.mediaVideo,.mediaVideoFacade{
    width:350px;
    height:200px;
    margin-bottom:10px;
}

.mediaVideoFacade{
    cursor:pointer;
    border:1px solid lightgreen;
    font-family:Arial;
    color:lightgreen;
    font-weight:bold;
    text-align:center;
}

.mediaVideoFacade img{
    margin-top:10px;
}

.mediaVideoFacade span{
    margin-top:10px;
    display:block;
}

.mediaJumper{
    cursor:pointer;
    text-decoration:underline;
    color:lightcoral;
    margin-bottom:10px;
    margin-left:30px;
}

JavaScript

window.addEventListener("load",function(){
    setUpMediaObjects();
    setUpMediaJumpers();
});
MediaObjects = [];
MediaJumpers = [];

function setUpMediaObjects() {
    var allAudioFacades = document.querySelectorAll(".mediaAudioFacade");
    if (allAudioFacades) {
        for (var i = 0; i < allAudioFacades.length; i++) {
            var facade = allAudioFacades[i];
            var mo = new MediaObject(facade);
            MediaObjects.push(mo);
        }
    }

    var allVideoFacades = document.querySelectorAll(".mediaVideoFacade");
    if (allVideoFacades) {
        for (var i = 0; i < allVideoFacades.length; i++) {
            var facade = allVideoFacades[i];
            var mo = new MediaObject(facade);
            MediaObjects.push(mo);
        }
    }
}

function setUpMediaJumpers(){
    var allMediaJumpers = document.querySelectorAll(".mediaJumper");
    for( var i = 0 ; i < allMediaJumpers.length ; i ++ ){
        var mediaJumper = allMediaJumpers[i];
        var mj = new MediaJumper(mediaJumper);
        MediaJumpers.push(mj);
    }
}


function MediaObject(facade) {
    this.facade = facade;
    this.id = this.facade.id;
    this.sourcesURI = this.facade.dataset.sources.split(",");
    this.sources = this.getSources();
    var isAudio = this.facade.className.match(/mediaAudioFacade/);
    this.type = (isAudio) ? "audio" : "video";
    this.icon = new Image();
        this.icon.src = (isAudio) ? "http://i.imgur.com/HKktAoE.png" : "http://findicons.com/icon/download/566082/video_play/33/png";
        this.setUpFacade();
    this.capType = this.type.substr(0,1).toUpperCase() + this.type.substr(1);
    this.elem = document.createElement(this.type);
    this.elem.controls = "true";
    this.elem.className = "mediaType".replace(/type/i, this.capType);
    this.hasStarted = false;
    this.appendSources();
    this.startTime = this.facade.dataset.start;
    this.endTime = this.facade.dataset.end;
    this.facade.addEventListener("click",...