JSFiddle - React, Tailwind, and code Playground

by Dave Rael

HTML

<div>
    <select id="mediaSelectionDropdown">
        <option> -- SELECT -- </option>
        <option value="http://traffic.libsyn.com/bulletproofradio/BPE20with20JJ20Virgin.mp3">audio
        </option>
        <option value="http://www.nasa.gov/mp4/152421main_121_landing_vodcast.mp4">video
        </option>
    </select>
</div>

<div>
    <video class="mediaPlayer" controls="controls" autoplay="autoplay"></video>
    <audio class="mediaPlayer" controls="controls" autoplay="autoplay"></audio>
<div>

CSS

.mediaPlayer:not(.selected) {
    display: none;
}

JavaScript

document.getElementById('mediaSelectionDropdown').addEventListener('change', function(){
    stopMediaPlayers();
    playMedia(this.options[this.selectedIndex].text, this.value);
});

function stopMediaPlayers(){
    var players = document.getElementsByClassName('mediaPlayer');
    for(var i = 0; i < players.length; i++)
    {
        var player = players.item(i);
        player.classList.remove('selected');
       player.pause();
    }
}

function playMedia(mediaType, mediaLocation){
    var mediaPlayer = document.getElementsByTagName(mediaType)[0];
    if(!mediaPlayer){
        return;
    }
    mediaPlayer.classList.add('selected')
    mediaPlayer.src = mediaLocation;
}