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',
        source: 'https://d26ua9paks4zq.cloudfront.net/a8/8a/2cc6b88546479955f78401633451/tracy-karolyi-34mq5-about-me-video.flv',
        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)
    });
});