https://test1.flashphoner.com:8444/client2/examples/demo/streaming/hls-player/hls-player.html?version=videojs7&src=https%3A%2F%2Ftest1.flashphoner.com%3A8445%2Ftest%2Ftest.m3u8

https://test1.flashphoner.com:8444/client2/examples/demo/streaming/hls-player/hls-player.html

const loadPlayerPage = function() {
    if (videojsVersion) {
        hideItem("videojsInputForm");
        loadVideoJS("videojs" + videojsVersion);
    } else {
        let videojsInput = document.getElementById("videojsInput");
        for (videojsType in VIDEOJS_VERSION_TYPE) {
            let option = document.createElement("option");
            let videojsFolder = "";
            switch (videojsType) {
                case 'VIDEOJS7':
                    videojsFolder = VIDEOJS_VERSION_TYPE.VIDEOJS7;
                    break;
                case 'VIDEOJS8':
                    videojsFolder = VIDEOJS_VERSION_TYPE.VIDEOJS8;
                    break;
            }
            option.text = videojsFolder;
            option.value = videojsFolder;
            videojsInput.appendChild(option);
        }

        setHandler("videojsBtn", "click", onVideojsBtnClick);
    }
}

const loadVideoJS = function (version) {
    if (version) {
        let playerPage = document.getElementById("playerPage");
        loadFile(version + "/video.js", "text/javascript").then( data  => {
            console.log("HLS library loaded successfully", data);
            loadFile(version + "/video-js.css", "stylesheet").then ( data => {
                console.log("HLS library stylesheet loaded successfully", data);
                hideItem("videojsInputForm");
                loadPage("player-page.html", "playerPage", initPage );
            }).catch( err => {
                playerPage.innerHTML = "Can't load VideoJS library stylesheet";
                playerPage.setAttribute("class", "text-danger");
                console.error(err);
            })
        }).catch( err => {
            setText("videojsError", "Can't load VideoJS library");
            console.error(err);
        });
    }
}

const initPage = function() {
    if (playSrc) {
        setValue("fullLink", decodeURIComponent(playSrc));
    } else if (autoplay) {
        console.warn("No HLS URL set, autoplay disabled");
        autoplay = false;
    }
    let remoteVideo = document.getElementById('remoteVideo');
    if (autoplay) {
        // There should not be any visible item on the page unless player
        hideAllToAutoplay();
        // The player should use all available page width
        setUpPlayerItem(true);
        // The player should be muted to automatically start playback
        player = initVideoJsPlayer(remoteVideo, true);
        playBtnClick();
    } else {
        // No autoplay, all the forms and buttons should be visible
        setText("header", "HLS VideoJS Player Minimal");
        displayCommonItems();
        setUpButtons();
        enablePlaybackStats();
        // The player should have a maximum fixed size
        setUpPlayerItem(false);
        // The player can be unmuted because user should click Play button
        player = initVideoJsPlayer(remoteVideo, false);
    }
}

const initVideoJsPlayer = function(video, muted) {
    let videoJsPlayer = null;
    if (video) {
        video.className = "video-js vjs-default-skin";
        videoJsPlayer = videojs(video, {
         for (videojsType in VIDEOJS_VERSION_TYPE) {
 playsinline: true,
            playbackRates:  let option = document.createElement("option");
 [0.1, 0.25, 0.5, 1, 1.5, 2],
           let videojsFolder = "";liveui: true,
            switch (videojsType) liveTracker: {
                case 'VIDEOJS7':trackingThreshold: LIVE_THRESHOLD,
                    videojsFolder = VIDEOJS_VERSION_TYPE.VIDEOJS7;liveTolerance: LIVE_TOLERANCE
                    break;},
                case 'VIDEOJS8':fill: true,
            muted: muted
       videojsFolder = VIDEOJS_VERSION_TYPE.VIDEOJS8 });
        console.log("Using VideoJs " + videojs.VERSION);
        break;
    if (Browser.isSafariWebRTC() && Browser.isiOS()) {
        }
    // iOS hack when using standard controls to option.textleave =fullscreen videojsFolder;mode
            option.valuelet videoTag = videojsFoldergetActualVideoTag();
            videojsInput.appendChildif(optionvideoTag); {
        }

        setHandlersetWebkitFullscreenHandlers("videojsBtn"videoTag, "click", onVideojsBtnClickfalse);
    }
}

const getVideoSrc =  loadFile(version + "/video.js", "text/javascript").then( data  => function(src) {
    let videoSrc = src;
    if console.log("HLS library loaded successfully", data);
(validateForm()) {
        let streamName = getValue('playStream');
    loadFile(version + "/video-js.css", "stylesheet").then ( data => { streamName = encodeURIComponent(streamName);
        videoSrc = getValue("urlServer") + '/' + streamName  console.log("HLS library stylesheet loaded successfully", data)+ '/' + streamName + '.m3u8';
        let key       hideItem("videojsInputForm"= getValue('key');
        let token       loadPage("player-page.html", "playerPage", initPage = getValue("token");
        if (key.length > 0 && })token.catch(length err> =>0) {
                playerPage.innerHTML videoSrc += "Can't load VideoJS library stylesheet"?" + key + "=" + token;
        }
    }
    playerPage.setAttributesetValue("classfullLink", "text-danger"videoSrc);
    return videoSrc;
}

const playBtnClick = function() {
    let videoSrc     console.error(err= getVideoSrc(getValue("fullLink"));
    if         })(videoSrc) {
        })player.catchon( err => 'loadedmetadata', function() {
            setText("videojsError", "Can't load VideoJS libraryconsole.log("Play with VideoJs");
            consoleplayer.errorplay(err);
        });
    }
}

const playBtnClick = function() {
     let videoSrc = getVideoSrc(getValue("fullLink"));
     if (videoSrc) {
         ...
    let  remoteVideo = documentplayer.getElementByIdon('remoteVideoplaying', function();
    remoteVideo.className = "video-js vjs-default-skin";
 {
          player = initVideoJsPlayer(remoteVideoconsole.log("playing event fired");
       playbackStats  =  PlaybackStats displayPermalink(STATS_INTERVAL);
}

const backBtnClick = function(event) {
    if        videoSrc += "?" + key + "=" + token;
        }(player != null && player.liveTracker) {
        player.on('loadedmetadata', function() {toggleBackButtons(false);
        let seekable =  consoleplayer.log("Play with VideoJs"seekable();
        let backTime   player.play()= -1;
        });if (event.target.id.indexOf("10") !== -1) {
        ...
    backTime  =  player.src({currentTime() - 10;
        } else if (event.target.id.indexOf("30")  src: videoSrc,!== -1) {
            type: "application/vnd.apple.mpegurl"backTime = player.currentTime() - 30;
        });
        onStarted();
    }
}

const liveBtnClick = function() {
    if (player != null         if (!&& player.liveTracker.isLive()) {
                    // A cratch to display live UI for the first subscriber
     player.liveTracker.seekToLiveEdge();
        toggleBackButtons(true);
    }
}

const stopBtnClick = liveUIDisplayfunction();
 {
    if (player != null) {
        console.log("Stop VideoJS }player");
        stopLiveUITimer();
        if (player.liveTracker.atLiveEdgedispose()) {;
    }
         onStopped();
}

const createRemoteVideo = function(parent) {
    let remoteVideo  // Unlock backward buttons when seeked to live edge= document.createElement("video");
    remoteVideo.id = "remoteVideo";
    remoteVideo.controls="controls";
                toggleBackButtons(true)remoteVideo.autoplay="autoplay";
    remoteVideo.type="application/vnd.apple.mpegurl";
    remoteVideo.className = "video-js vjs-default-skin";
    remoteVideo.setAttribute("playsinline","");
     // Stop live UI startup timerremoteVideo.setAttribute("webkit-playsinline","");
    parent.appendChild(remoteVideo);
    player = initVideoJsPlayer(remoteVideo, autoplay);
}

const PlaybackStats = function(interval) {
    const playbackStats =   stopLiveUITimer();
{
        interval: interval || STATS_INTERVAL,
      }
  timer: null,
        stats: }null,
        });
 start: function() {
       ...
    }
}