JSFiddle - React, Tailwind, and code Playground

by nathanlogan

HTML

<video controls="true" preload="true" class="HwVideoTag" crossorigin="anonymous" poster="https://assetpool.test.hwapps.net/11.1/en-us/desktop/abq5105/SD/abq5105.jpg">

<source src="https://d20bb9v528piij.cloudfront.net/11.1/en-us/abq5105/SD/hls/EF0/filesequence.m3u8?Expires=1481092567&amp;Signature=Ixupr4DJWdFgVvbacn~g99l0UKt7OTfNfyJlCkNIp0iheFk2GmkHr~2Dmia1QWYTPkE6d5VhBiz-cbjsv4AbqtRDoEVHYUb6EJUjpH1RH2jYHlqztRmrWMrgue9qy87jFsauNzx7-k5BnKXt7QInip6LQt5hDEkCXOzAJMpgGVc_&amp;Key-Pair-Id=APKAIDLZDAU235UUEL6A">

<source src="https://d20bb9v528piij.cloudfront.net/11.1/en-us/abq5105/SD/E0/abq5105.mp4?Expires=1481092567&amp;Signature=b0wUx6TjevjHpN48FTZDBZAk027IouaHP3kIkmzY-dH60EbpVwAbwyElbZkOCP4TxXa80rVIJiSMlxaRZzi4W7GsvLdCehsdu15fjlnooWaONRYXH8Wkd7VvNs7Zhph2Tukjtm2v4mCVPnl-OVJGc1LwWDTi1X0~-7w76CgmzQM_&amp;Key-Pair-Id=APKAIDLZDAU235UUEL6A">

<track id="track" label="English" kind="captions" srclang="English" data-src="https://assetpool.test.hwapps.net/11.1/en-us/desktop/abq5105/abq5105.vtt"...

JavaScript

function loadXMLDoc(url, el) {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
           if (xmlhttp.status == 200) {
             var base64val = window.btoa(xmlhttp.responseText)
             // var src = el.setAttribute('src', 'data:text/vtt;base64,' + base64val)
             console.log('data:text/vtt;base64,' + base64val)
               
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    };

    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

var el = document.getElementById('track')
var src = el.getAttribute('data-src')
loadXMLDoc(src, el)