JSFiddle - React, Tailwind, and code Playground

copy of abclive_abcnews_com_m3u8_working_v11 ,, Clappr.JS and clappr.min.js via github

by dledle2

HTML

<!-- myPredictJSFiddleVersion=v11

abclive_abcnews_com_m3u8_working_v11 ,, Clappr.JS and clappr.min.js via github
-( often opcorn with peter travers)
  -github link should not be working unless raw.github... BUT somehow works here
    -feature added already just now:RedirectPageToHTTP (to match the URL of the streaming source) for blocking of loading of mixed content
// -->
<script src='https://github.com/clappr/clappr/raw/master/dist/clappr.min.js'></script>
<div id="player-wrapper"></div>

JavaScript

if (location.protocol != 'http:') {
  
try{location.href = 'http:' + window.location.href.substring(window.location.protocol.length);    }catch(e){}

var myStrURL='http:' + window.location.href.substring(window.location.protocol.length);
console.log(myStrURL);
myStrURL=myStrURL.replace('/light','');
/* potention case-sensitive issue if i copy/paste to other websites */
console.log(myStrURL);

try{window.open(myStrURL , '' , '');    }catch(e){}
}
else
{
  /* xxx; */



  $(function() {
    var player = new Clappr.Player({
      sourceZZZ: 'http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8',
      sourceYYY: 'https://s3-us-west-2.amazonaws.com/hg-video-out/Karolyi,_Tracy_34MQ5_about_me_videod737bccd1ac88a5251ef887734a2f0ab21114f331a25ab7abd9a1e4e46a39f6d/hls_d737bccd1ac88a5251ef887734a2f0ab21114f331a25ab7abd9a1e4e46a39f6d.m3u8',
      sourceNNN: 'Zhttp://spswxyz-i.akamaihd.net/hls/live/203378/anvato/348k/prog.m3u8?anv=1428346792363&X-Anvato-',
      source: 'http://abclive.abcnews.com/i/abc_live4@136330/index_800_av-b.m3u8',
      parentId: "#player-wrapper",
      autoPlay: true
    });
    /*
        player.on(Clappr.Events.PLAYER_ERROR, function (a) {
            console.log('PLAYER_ERROR!', a.error.code)
        });
        player.on(Clappr.Events.PLAYER_PLAY, function () {
            console.log("PLAYER_PLAY!")
        });
        player.on(Clappr.Events.PLAYER_ENDED, function () {
            console.log('PLAYER_ENDED!')
        });
        player.on(Clappr.Events.PLAYER_PAUSE, function () {
            console.log('PLAYER_PAUSE!')
        });
        player.on(Clappr.Events.PLAYER_RESIZE, function (a) {
            console.log('PLAYER_RESIZE!', a)
        });
        player.on(Clappr.Events.PLAYER_SEEK, function (a) {
            console.log('PLAYER_SEEK!', a)
        });
        player.on(Clappr.Events.PLAYER_STOP, function () {
            console.log('PLAYER_STOP!')
        });
        player.on(Clappr.Events.PLAYER_TIMEUPDATE, function (a, b) {
   ...