JSFiddle - React, Tailwind, and code Playground

working m3u8 via Clappr.JS playing and clappr.min.js via github

by dledle2

HTML

<!--  working m3u8 via Clappr.JS playing and clappr.min.js via github    // -->
<script src='https://github.com/clappr/clappr/raw/master/dist/clappr.min.js'></script>
<div id="player-wrapper"></div>

JavaScript

$(function () {
    var player = new Clappr.Player({
        sourceZZZ: 'http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8',
        sourceYYY: 'http://tvemsnbc-lh.akamaihd.net/i/nbcmsnbc_1@122532/master.m3u8?sd=10&rebase=on',
        sourceQQQ: 'rtmp://cp67126.edgefcs.net/ondemand/&mp4:mediapm/ovp/content/test/video/spacealonehd_sounas_640_300.mp4',
        source: 'http://spswxyz-i.akamaihd.net/hls/live/203378/anvato/348k/prog.m3u8?anv=1428346792363&X-Anvato-',
        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) {
        console.log('PLAYER_TIMEUPDATE!', a, b)
    });
    
*/
    
});