Page History

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

const loadQualityPlugin = function(version, playerPage) {
    if (version) {
  // There should not be any visibleloadFile(version item on the page unless player+ "/videojs-contrib-quality-levels.js", "text/javascript").then( data => {
        hideAllToAutoplay(    console.log("HLS quality levels plugin loaded successfully", data);
        // The player should use all available page width
 hideItem("videojsInputForm");
            setUpPlayerItem(trueloadPage("player-page.html", "playerPage", initPage);
        // The player should be muted to automatically start playback
}).catch( err => {
              player = initVideoJsPlayer(remoteVideo, true);
        playBtnClick(setText("videojsError", "Can't load VideoJS quality levels plugin");
    } else {
      console.error(err);
  // No autoplay, all the forms and});
 buttons should be visible
        setText("header", "HLS VideoJS Player Minimal");}
}

const initPage = function() {
    if    displayCommonItems(playSrc); {
         setUpButtons(setValue("fullLink", decodeURIComponent(playSrc));
    } else if  enablePlaybackStats(autoplay); {
        // The player should have a maximum fixed size
console.warn("No HLS URL set, autoplay disabled");
        autoplay = setUpPlayerItem(false);
    }
    //let TheremoteVideo player can be unmuted because user should click Play button
= document.getElementById('remoteVideo');
    if (autoplay) {
        // There playershould = initVideoJsPlayer(remoteVideo, false);
    }
}

const initVideoJsPlayer = function(video, muted) {
    let videoJsPlayer = null;
    if (video) {
        video.className = "video-js vjs-default-skin";
        videoJsPlayer = videojs(video, {
            playsinline: true,
            playbackRates: [0.1, 0.25, 0.5, 1, 1.5, 2],
            liveui: true,
            liveTracker: {
                trackingThreshold: LIVE_THRESHOLD,
                liveTolerance: LIVE_TOLERANCE
            },
            fill: true,
            muted: muted,
            html5: {
                vhs: {
                    limitRenditionByPlayerDimensions: false
                }
            }
        });
        console.log("Using VideoJs " + videojs.VERSION);
        if (Browser.isSafariWebRTC() && Browser.isiOS()) {
            // iOS hack when using standard controls to leave fullscreen mode
            let videoTag = getActualVideoTag();
            if(videoTag) {
                setWebkitFullscreenHandlers(videoTag, false);
            }
        }
    }
    return videoJsPlayer;
}

const getVideoSrc = function(src) {
    let videoSrc = src;
    if (validateForm()) {
        let streamName = getValue('playStream');
        streamName = encodeURIComponent(streamName);
        videoSrc = getValue("urlServer") + '/' + streamName + '/' + streamName + '.m3u8';
        let key = getValue('key');
        let token = getValue("token");
        if (key.length > 0 && token.length > 0) {
            videoSrc += "?" + key + "=" + token;
        }
    }
    setValue("fullLink", videoSrc);
    return videoSrc;
}

const playBtnClick = function() {
    let videoSrc = getVideoSrc(getValue("fullLink"));
    if (videoSrc) {
        player.on('loadedmetadata', function() {
            console.log("Play with VideoJs");
            player.play();
        });
        ...
        player.src({
            src: videoSrc,
            type: "application/vnd.apple.mpegurl"
        });
        onStarted();
    }
}

const playBtnClick = function() {
     let videoSrc = getVideoSrc(getValue("fullLink"));
     if (videoSrc) {
         ...
         player.on('playing', function() {
            console.log("playing event fired");
            displayPermalink(videoSrc);
            if (player.liveTracker) {
                 playsinline: true,
 if (!player.liveTracker.isLive()) {
           playbackRates: [0.1, 0.25, 0.5, 1, 1.5, 2],
   // A cratch to display live UI for the liveui:first true,subscriber
            liveTracker: {
       liveUIDisplay();
         trackingThreshold: LIVE_THRESHOLD,
      }
          liveTolerance: LIVE_TOLERANCE
     if (player.liveTracker.atLiveEdge()) {
     },
            fill: true,
  // Unlock backward buttons when seeked to    muted: mutedlive edge
        });
        console.log("Using VideoJs " + videojs.VERSION toggleBackButtons(true);
        if (Browser.isSafariWebRTC() && Browser.isiOS()) {
            // iOSStop hacklive whenUI usingstartup standardtimer
 controls to leave fullscreen mode
            let videoTag = getActualVideoTagstopLiveUITimer();
            if(videoTag) {
    }
            }
            setWebkitFullscreenHandlers(videoTag, falseinitQualityLevels(player);
            } displayQualitySwitch();
        });
      }  ...
    return videoJsPlayer;}
}

const backBtnClick = function(event) {
     if (player != null && player.liveTracker.isLive()) {
        toggleBackButtons(false);
        let seekable   // A cratch to display live UI for the first subscriber= player.seekable();
        let backTime           liveUIDisplay();
   = -1;
        if (event.target.id.indexOf("10") !== -1)  }{
            backTime  =  if (player.liveTracker.atLiveEdgecurrentTime()) - {10;
        } else if (event.target.id.indexOf("30") !== -1) {
         // Unlock backward buttonsbackTime when seeked to live edge= player.currentTime() - 30;
        }
        if (backTime <  toggleBackButtons(true);0) {
            backTime = seekable ? seekable.start(0) : player.currentTime();
   // Stop live UI startup timer}
        player.currentTime(backTime);
    }
}

const liveBtnClick       stopLiveUITimer= function();
                } {
    if (player != null &&    }player.liveTracker) {
        }player.liveTracker.seekToLiveEdge();
        ...toggleBackButtons(true);
    }
}