JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mediaplayer"></div>
<ul id="menu">
<li><a href="#">Source 1</a></li>
</ul>

JavaScript

// this requires jquery
        var MediaLink_Click = function (e) {
                        
            var mp = document.getElementById('mediaPlayer');
            if ((null !== mp) && (undefined !== mp)) {
                if ((null != mp.contentDocument) && (undefined !== mp.contentDocument)) {
                    $("object").each(function () {
                        this.contentDocument.controls.stop();
                    });
                }
                $(mp).remove();
            }
        
            var oeTags = '<object id="mediaPlayer" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="640px" height="480px"'
                        + 'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"'
                        + 'standby="Loading Microsoft Windows Media Player components..."'
                        + 'type="application/x-oleobject">'
                        + '   <param name="autoStart" value="true"/>'
                        + '   <param name="url"       value="' + e.data.media_path + '" />'
                        + '   <param name="wmode"     value="transparent" />'
                        + '   <param name="uiMode"    value="full" />'
                        + '   <param name="loop"      value="false" />'
                        + '   <embed id       ="EmbedmediaPlayer"'
                        + '       type        ="application/x-mplayer2"'
                        + '       src         ="' + e.data.media_path + '"'
                        + '       width       ="640"'
                        + '       height      ="480">'
                        + '   </embed>'
                        + '</object>';
            $("#mediaplayer").html(oeTags); 
        }; 


 $("a").bind("click", { media_path: "http://www.myurlname/afghan.avi" }, MediaLink_Click);