@flashphoner/websdk 2.0.243 → 2.0.244

package/docTemplate/README.md

@@ -1,4 +1,4 @@
-Web SDK - 2.0.243
+Web SDK - 2.0.244
 
 [Download builds](https://docs.flashphoner.com/display/WEBSDK2EN/Web+SDK+release+notes)
 

package/examples/demo/streaming/hls-js-player/hls-js-player.js

@@ -2,6 +2,9 @@ const Browser = Flashphoner.Browser;
 const STATS_INTERVAL = 1000;
 let remoteVideo = null;
 let hlsPlayer = null;
+let playSrc = getUrlParam("src");
+let autoplay = eval(getUrlParam("autoplay")) || false;
+let llHlsEnabled = eval(getUrlParam("llhls")) || false;
 let playbackStats = null;
 
 const loadPlayerPage = function() {
@@ -22,17 +25,37 @@ const loadPage = function(page, containerId, onLoad) {
 }
 
 const initPage =  function() {
-    setText("header", "HLS.JS Player Minimal");
-    setValue("urlServer", getHLSUrl());
-    setText("applyBtn", "Play");
-    setHandler("applyBtn", "click", playBtnClick);
+    if (playSrc) {
+        setValue("fullLink", decodeURIComponent(playSrc));
+    } else if (autoplay) {
+        console.warn("No HLS URL set, autoplay disabled");
+        autoplay = false;
+    }
+    if (llHlsEnabled) {
+        setCheckbox("llHlsEnabled", llHlsEnabled);
+    }
     remoteVideo = document.getElementById('remoteVideo');
-    remoteVideo.style ="background-color: lightgrey;";
     if (Hls.isSupported()) {
         console.log("Using HLS.JS " + Hls.version);
-        enableItem("applyBtn");
-        showItem("llHlsMode");
-        playbackStats = PlaybackStats(STATS_INTERVAL);
+        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
+            initVideoPlayer(remoteVideo, true);
+            playBtnClick();
+        } else {
+            setText("header", "HLS.JS Player Minimal");
+            showItem("llHlsMode");
+            displayCommonItems();
+            setUpButtons();
+            enablePlaybackStats();
+            // The player should have a maximum fixed size
+            setUpPlayerItem(false);
+            // The player can be unmuted because user should click Play button
+            initVideoPlayer(remoteVideo, false);
+        }
     } else {
         setText("notifyFlash", "Your browser doesn't support MSE technology required to play video");
         disableItem("applyBtn");
@@ -42,21 +65,18 @@ const initPage =  function() {
 
 
 const playBtnClick = function() {
-    if (validateForm()) {
-        let llHlsEnabled = getCheckbox("llHlsEnabled");
-        let streamName = getValue("playStream");
-        streamName = encodeURIComponent(streamName);
-        let videoSrc = getValue("urlServer") + '/' + streamName + '/' + streamName + '.m3u8';
-        let key = getValue('key');
-        let token = getValue("token");
-        if (key.length > 0 && token.length > 0) {
-            videoSrc += "?" + key + "=" + token;
-        }
+    let videoSrc = getVideoSrc(getValue("fullLink"));
+    if (videoSrc) {
+        llHlsEnabled = getCheckbox("llHlsEnabled");
         hlsPlayer = new Hls(getHlsConfig(llHlsEnabled));
         hlsPlayer.on(Hls.Events.MANIFEST_PARSED, function() {
             console.log("Play with HLS.js");
             remoteVideo.play();
         });
+        remoteVideo.onplaying = () => {
+            console.log("playing event fired");
+            displayPermalink(videoSrc);
+        }
         hlsPlayer.loadSource(videoSrc);
         hlsPlayer.attachMedia(remoteVideo);
         onStarted();            
@@ -108,20 +128,25 @@ const stopBtnClick = function() {
 
 
 const onStarted = function() {
-    toggleInputs(false);
-    enableItem("applyBtn");
-    setText("applyBtn", "Stop");
-    setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
-    playbackStats.start();
+    if (!autoplay) {
+        toggleInputs(false);
+        enableItem("applyBtn");
+        hideItem("permalink");
+        setText("applyBtn", "Stop");
+        setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
+        startPlaybackStats();
+    }
 }
 
 
 function onStopped() {
-    toggleInputs(true);
-    enableItem("applyBtn");
-    setText("applyBtn", "Play");
-    setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
-    playbackStats.stop();
+    if (!autoplay) {
+        toggleInputs(true);
+        enableItem("applyBtn");
+        setText("applyBtn", "Play");
+        setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
+        stopPlaybackStats();
+    }
 }
 
 
@@ -166,6 +191,18 @@ const removeHighlight = function(input) {
     }
 }
 
+const initVideoPlayer = function(video, muted) {
+    if (video) {
+        video.style.backgroundColor = "black";
+        video.muted = muted;
+    }
+}
+
+const setUpButtons = function() {
+    setHandler("applyBtn", "click", playBtnClick);
+}
+
+
 const toggleInputs = function(enable) {
     if (enable) {
         enableItem("urlServer");
@@ -184,6 +221,82 @@ const toggleInputs = function(enable) {
     }
 }
 
+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 displayPermalink = function(src) {
+    if (!autoplay) {
+        const permalinkId = "permalink";
+        let videoSrc = encodeURIComponent(src);
+        let linkObject = document.getElementById(permalinkId);
+        let href = window.location.href.split("?")[0] + "?llhls=" + llHlsEnabled + "&src=" + videoSrc;
+        linkObject.href = href;
+        showItem(permalinkId);
+    }
+}
+
+const hideAllToAutoplay = function() {
+    hideItem("header");
+    hideItem("notifyFlash");
+    hideItem("fieldset");
+    hideItem("stats");
+}
+
+const displayCommonItems = function() {
+    setValue("urlServer", getHLSUrl());
+    hideItem("permalink");
+    enableItem("applyBtn");
+    setText("applyBtn", "Play");
+}
+
+const setUpPlayerItem = function(fillPage) {
+    let videoContainer = document.getElementById('videoContainer');
+    let playerPage = document.getElementById('playerPage');
+
+    if (fillPage) {
+        playerPage.classList.remove("container");
+        videoContainer.style.marginTop = "0px";
+        videoContainer.style.width = "100vw";
+        videoContainer.style.height = "100vh";
+        videoContainer.style.maxWidth = "available";
+        videoContainer.style.maxHeight = "available";
+    } else {
+        videoContainer.style.maxWidth = "852px";
+        videoContainer.style.maxHeight = "480px";
+    }
+}
+
+const enablePlaybackStats = function() {
+    if (!autoplay && !playbackStats) {
+        playbackStats = PlaybackStats(STATS_INTERVAL);
+    }
+}
+
+const startPlaybackStats = function() {
+    if (!autoplay && playbackStats) {
+        playbackStats.start();
+    }
+}
+
+const stopPlaybackStats = function() {
+    if (!autoplay && playbackStats) {
+        playbackStats.stop();
+    }
+}
+
 const PlaybackStats = function(interval) {
     const playbackStats = {
         interval: interval || STATS_INTERVAL,

package/examples/demo/streaming/hls-native/hls-native.js

@@ -1,6 +1,8 @@
 const Browser = Flashphoner.Browser;
 const STATS_INTERVAL = 1000;
 let remoteVideo = null;
+let playSrc = getUrlParam("src");
+let autoplay = eval(getUrlParam("autoplay")) || false;
 let playbackStats = null;
 
 const loadPlayerPage = function() {
@@ -21,19 +23,33 @@ const loadPage = function(page, containerId, onLoad) {
 }
 
 const initPage = function() {
-    setText("header", "HLS Native Player Minimal");
-    setValue("urlServer", getHLSUrl());
-    setText("applyBtn", "Play");
-    setHandler("applyBtn", "click", playBtnClick);
-    remoteVideo = document.getElementById('remoteVideo');
-    remoteVideo.style ="background-color: lightgrey;";
-    if (Browser.isSafariWebRTC() && Browser.isiOS()) {
-        // iOS hack when using standard controls to leave fullscreen mode
-        setWebkitFullscreenHandlers(remoteVideo);
+    if (playSrc) {
+        setValue("fullLink", decodeURIComponent(playSrc));
+    } else if (autoplay) {
+        console.warn("No HLS URL set, autoplay disabled");
+        autoplay = false;
     }
+    remoteVideo = document.getElementById('remoteVideo');
     if (remoteVideo.canPlayType('application/vnd.apple.mpegurl') && Browser.isSafariWebRTC()) {
-        enableItem("applyBtn");
-        playbackStats = PlaybackStats(STATS_INTERVAL);
+        console.log("Using Native HLS player");
+        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
+            initVideoPlayer(remoteVideo, true);
+            playBtnClick();
+        } else {
+            setText("header", "HLS Native 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
+            initVideoPlayer(remoteVideo, false);
+        }
     } else {
         setText("notifyFlash", "Your browser doesn't support native HLS playback");
         disableItem("applyBtn");
@@ -42,21 +58,18 @@ const initPage = function() {
 }
 
 const playBtnClick = function() {
-    if (validateForm()) {
-        let streamName = getValue("playStream");
-        streamName = encodeURIComponent(streamName);
-        let videoSrc = getValue("urlServer") + '/' + streamName + '/' + streamName + '.m3u8';
-        let key = getValue('key');
-        let token = getValue("token");
-        if (key.length > 0 && token.length > 0) {
-            videoSrc += "?" + key + "=" + token;
-        }
-        remoteVideo.src = videoSrc;
-        remoteVideo.addEventListener('loadedmetadata', function() {
+    let videoSrc = getVideoSrc(getValue("fullLink"));
+    if (videoSrc) {
+        remoteVideo.onloadedmetadata = () => {
             console.log("Play native HLS");
             remoteVideo.play();
             onStarted();
-        });
+        };
+        remoteVideo.onplaying = () => {
+            console.log("playing event fired");
+            displayPermalink(videoSrc);
+        };
+        remoteVideo.src = videoSrc;
     }
 }
 
@@ -74,20 +87,25 @@ const stopBtnClick = function() {
 
 
 const onStarted = function() {
-    toggleInputs(false);
-    enableItem("applyBtn");
-    setText("applyBtn", "Stop");
-    setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
-    playbackStats.start();
+    if (!autoplay) {
+        toggleInputs(false);
+        enableItem("applyBtn");
+        hideItem("permalink");
+        setText("applyBtn", "Stop");
+        setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
+        startPlaybackStats();
+    }
 }
 
 
 const onStopped = function() {
-    toggleInputs(true);
-    enableItem("applyBtn");
-    setText("applyBtn", "Play");
-    setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
-    playbackStats.stop();
+    if (!autoplay) {
+        toggleInputs(true);
+        enableItem("applyBtn");
+        setText("applyBtn", "Play");
+        setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
+        stopPlaybackStats();
+    }
 }
 
 
@@ -132,6 +150,21 @@ const removeHighlight = function(input) {
     }
 }
 
+const initVideoPlayer = function(video, muted) {
+    if (video) {
+        video.style.backgroundColor = "black";
+        video.muted = muted;
+        if (Browser.isiOS()) {
+            // iOS hack when using standard controls to leave fullscreen mode
+            setWebkitFullscreenHandlers(video);
+        }
+    }
+}
+
+const setUpButtons = function() {
+    setHandler("applyBtn", "click", playBtnClick);
+}
+
 const toggleInputs = function(enable) {
     if (enable) {
         enableItem("urlServer");
@@ -148,6 +181,82 @@ const toggleInputs = function(enable) {
     }
 }
 
+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 displayPermalink = function(src) {
+    if (!autoplay) {
+        const permalinkId = "permalink";
+        let videoSrc = encodeURIComponent(src);
+        let linkObject = document.getElementById(permalinkId);
+        let href = window.location.href.split("?")[0] + "?src=" + videoSrc;
+        linkObject.href = href;
+        showItem(permalinkId);
+    }
+}
+
+const hideAllToAutoplay = function() {
+    hideItem("header");
+    hideItem("notifyFlash");
+    hideItem("fieldset");
+    hideItem("stats");
+}
+
+const displayCommonItems = function() {
+    setValue("urlServer", getHLSUrl());
+    hideItem("permalink");
+    enableItem("applyBtn");
+    setText("applyBtn", "Play");
+}
+
+const setUpPlayerItem = function(fillPage) {
+    let videoContainer = document.getElementById('videoContainer');
+    let playerPage = document.getElementById('playerPage');
+
+    if (fillPage) {
+        playerPage.classList.remove("container");
+        videoContainer.style.marginTop = "0px";
+        videoContainer.style.width = "100vw";
+        videoContainer.style.height = "100vh";
+        videoContainer.style.maxWidth = "available";
+        videoContainer.style.maxHeight = "available";
+    } else {
+        videoContainer.style.maxWidth = "852px";
+        videoContainer.style.maxHeight = "480px";
+    }
+}
+
+const enablePlaybackStats = function() {
+    if (!autoplay && !playbackStats) {
+        playbackStats = PlaybackStats(STATS_INTERVAL);
+    }
+}
+
+const startPlaybackStats = function() {
+    if (!autoplay && playbackStats) {
+        playbackStats.start();
+    }
+}
+
+const stopPlaybackStats = function() {
+    if (!autoplay && playbackStats) {
+        playbackStats.stop();
+    }
+}
+
 const PlaybackStats = function(interval) {
     const playbackStats = {
         interval: interval || STATS_INTERVAL,

package/examples/demo/streaming/hls-player/hls-player.js

@@ -10,13 +10,19 @@ const STATS_INTERVAL = 1000;
 let player = null;
 let liveUITimer = null;
 let videojsVersion = getUrlParam("version");
+let playSrc = getUrlParam("src");
+let autoplay = eval(getUrlParam("autoplay")) || false;
 let playbackStats = null;
 
 const loadPlayerPage = function() {
     if (videojsVersion) {
         hideItem("videojsInputForm");
-        loadVideoJS("videojs" + videojsVersion);
+        loadVideoJS(videojsVersion);
     } else {
+        if (autoplay) {
+            console.warn("No VideoJS version set, autoplay disabled");
+            autoplay = false;
+        }
         let videojsInput = document.getElementById("videojsInput");
         for (videojsType in VIDEOJS_VERSION_TYPE) {
             let option = document.createElement("option");
@@ -44,13 +50,14 @@ const onVideojsBtnClick = function () {
 
 const loadVideoJS = function (version) {
     if (version) {
+        videojsVersion = 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 );
+                loadPage("player-page.html", "playerPage", initPage);
             }).catch( err => {
                 playerPage.innerHTML = "Can't load VideoJS library stylesheet";
                 playerPage.setAttribute("class", "text-danger");
@@ -117,31 +124,37 @@ const loadPage = function(page, containerId, onLoad) {
 }
 
 const initPage = function() {
-    setText("header", "HLS VideoJS Player Minimal");
-    setValue("urlServer", getHLSUrl());
-    enableItem("applyBtn");
-    setText("applyBtn", "Play");
-    setHandler("applyBtn", "click", playBtnClick);
-    setHandler("backBtn10", "click", backBtnClick);
-    setHandler("backBtn30", "click", backBtnClick);
-    setHandler("backBtnMax", "click", backBtnClick);
-    setHandler("liveBtn", "click", liveBtnClick);
+    if (playSrc) {
+        setValue("fullLink", decodeURIComponent(playSrc));
+    } else if (autoplay) {
+        console.warn("No HLS URL set, autoplay disabled");
+        autoplay = false;
+    }
     let remoteVideo = document.getElementById('remoteVideo');
-    remoteVideo.className = "video-js vjs-default-skin";
-    player = initVideoJsPlayer(remoteVideo);
-    playbackStats = PlaybackStats(STATS_INTERVAL);
+    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 playBtnClick = function() {
-    if (validateForm()) {
-        let streamName = getValue('playStream');
-        streamName = encodeURIComponent(streamName);
-        let videoSrc = getValue("urlServer") + '/' + streamName + '/' + streamName + '.m3u8';
-        let key = getValue('key');
-        let token = getValue("token");
-        if (key.length > 0 && token.length > 0) {
-            videoSrc += "?" + key + "=" + token;
-        }
+    let videoSrc = getVideoSrc(getValue("fullLink"));
+    if (videoSrc) {
         player.on('loadedmetadata', function() {
             console.log("Play with VideoJs");
             player.play();
@@ -157,6 +170,7 @@ const playBtnClick = function() {
         });
         player.on('playing', function() {
             console.log("playing event fired");
+            displayPermalink(videoSrc);
             if (player.liveTracker) {
                 if (!player.liveTracker.isLive()) {
                     // A cratch to display live UI for the first subscriber
@@ -231,23 +245,27 @@ const liveBtnClick = function() {
 }
 
 const onStarted = function() {
-    toggleInputs(false);
-    enableItem("applyBtn");
-    showItem("backward");
-    toggleBackButtons(true);
-    setText("applyBtn", "Stop");
-    setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
-    playbackStats.start();
+    if (!autoplay) {
+        toggleInputs(false);
+        enableItem("applyBtn");
+        hideItem("permalink");
+        showItem("backward");
+        setText("applyBtn", "Stop");
+        setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
+        startPlaybackStats();
+    }
 }
 
 
 const onStopped = function() {
-    toggleInputs(true);
-    enableItem("applyBtn");
-    hideItem("backward");
-    setText("applyBtn", "Play");
-    setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
-    playbackStats.stop();
+    if (!autoplay) {
+        toggleInputs(true);
+        enableItem("applyBtn");
+        hideItem("backward");
+        setText("applyBtn", "Play");
+        setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
+        stopPlaybackStats();
+    }
     if(!document.getElementById('remoteVideo')) {
         createRemoteVideo(document.getElementById('videoContainer'));
     }
@@ -264,7 +282,7 @@ const createRemoteVideo = function(parent) {
     remoteVideo.setAttribute("playsinline","");
     remoteVideo.setAttribute("webkit-playsinline","");
     parent.appendChild(remoteVideo);
-    player = initVideoJsPlayer(remoteVideo);
+    player = initVideoJsPlayer(remoteVideo, autoplay);
 }
 
 
@@ -309,23 +327,28 @@ const removeHighlight = function(input) {
     }
 }
 
-const initVideoJsPlayer = function(video) {
-    let 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
-    });
-    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);
+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
+        });
+        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;
@@ -339,15 +362,25 @@ const getActualVideoTag = function() {
     return null;
 }
 
+const setUpButtons = function() {
+    setHandler("applyBtn", "click", playBtnClick);
+    setHandler("backBtn10", "click", backBtnClick);
+    setHandler("backBtn30", "click", backBtnClick);
+    setHandler("backBtnMax", "click", backBtnClick);
+    setHandler("liveBtn", "click", liveBtnClick);
+}
+
 const toggleBackButtons = function(enable) {
-    if (enable) {
-        enableItem("backBtn10");
-        enableItem("backBtn30");
-        enableItem("backBtnMax");
-    } else {
-        disableItem("backBtn10");
-        disableItem("backBtn30");
-        disableItem("backBtnMax");
+    if (!autoplay) {
+        if (enable) {
+            enableItem("backBtn10");
+            enableItem("backBtn30");
+            enableItem("backBtnMax");
+        } else {
+            disableItem("backBtn10");
+            disableItem("backBtn30");
+            disableItem("backBtnMax");
+        }
     }
 }
 
@@ -367,6 +400,82 @@ const toggleInputs = function(enable) {
     }
 }
 
+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 displayPermalink = function(src) {
+    if (!autoplay) {
+        const permalinkId = "permalink";
+        let videoSrc = encodeURIComponent(src);
+        let linkObject = document.getElementById(permalinkId);
+        let href = window.location.href.split("?")[0] + "?version=" + videojsVersion + "&src=" + videoSrc;
+        linkObject.href = href;
+        showItem(permalinkId);
+    }
+}
+
+const hideAllToAutoplay = function() {
+    hideItem("header");
+    hideItem("notifyFlash");
+    hideItem("fieldset");
+    hideItem("stats");
+}
+
+const displayCommonItems = function() {
+    setValue("urlServer", getHLSUrl());
+    hideItem("permalink");
+    enableItem("applyBtn");
+    setText("applyBtn", "Play");
+}
+
+const setUpPlayerItem = function(fillPage) {
+    let videoContainer = document.getElementById('videoContainer');
+    let playerPage = document.getElementById('playerPage');
+
+    if (fillPage) {
+        playerPage.classList.remove("container");
+        videoContainer.style.marginTop = "0px";
+        videoContainer.style.width = "100vw";
+        videoContainer.style.height = "100vh";
+        videoContainer.style.maxWidth = "available";
+        videoContainer.style.maxHeight = "available";
+    } else {
+        videoContainer.style.maxWidth = "852px";
+        videoContainer.style.maxHeight = "480px";
+    }
+}
+
+const enablePlaybackStats = function() {
+    if (!autoplay && !playbackStats) {
+        playbackStats = PlaybackStats(STATS_INTERVAL);
+    }
+}
+
+const startPlaybackStats = function() {
+    if (!autoplay && playbackStats) {
+        playbackStats.start();
+    }
+}
+
+const stopPlaybackStats = function() {
+    if (!autoplay && playbackStats) {
+        playbackStats.stop();
+    }
+}
+
 const PlaybackStats = function(interval) {
     const playbackStats = {
         interval: interval || STATS_INTERVAL,
@@ -374,7 +483,6 @@ const PlaybackStats = function(interval) {
         stats: null,
         start: function() {
             let video = getActualVideoTag();
-
             playbackStats.stop();
             stats = HTML5Stats(video);
             playbackStats.timer = setInterval(playbackStats.displayStats, playbackStats.interval);

package/examples/demo/streaming/hls-player/player-page.html

@@ -28,9 +28,9 @@
                 </div>
 
                 <div class="row" style="margin-top:10px">
-                    <div class="form-group">
+                    <div id="authForm" class="form-group">
                         <label class="control-label col-sm-1 fp-buttonVerticalAlign  text-left"
-                               for="playStream">Auth</label>
+                               for="key">Auth</label>
 
                         <div class="col-sm-12">
                             <div class="col-sm-4 nopadding">
@@ -43,6 +43,24 @@
                         </div>
                     </div>
                 </div>
+
+                <div class="row" style="margin-top:10px">
+                    <div id="linkForm" class="form-group">
+                        <label class="control-label col-sm-12 fp-buttonVerticalAlign  text-left"
+                               for="fullLink">Or set a full HLS stream URL</label>
+
+                        <div class="col-sm-12">
+                            <input type="text" class="form-control" id="fullLink" placeholder="Full HLS link"/>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="row" style="margin-top:10px">
+                    <div class="col-sm-12 text-center">
+                        <a id="permalink" href="#">Permalink</a>
+                    </div>
+                </div>
+
                 <div class="row" style="margin-top: 20px">
                     <div class="col-sm-4 text-left">
                         <div id="llHlsMode" style="display: none;">
@@ -69,7 +87,7 @@
         </div>
     </div>
     <div class="row">
-        <div id="videoContainer" class="col-sm-12 text-center" style="margin-top: 20px; max-width: 852px; width: available; max-height: 480px; height: 56.25vw">
+        <div id="videoContainer" style="margin-top: 20px; width: available; height: 56.25vw">
             <video id="remoteVideo"
                    width="100%"
                    height="100%"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flashphoner/websdk",
-  "version": "2.0.243",
+  "version": "2.0.244",
   "description": "Official Flashphoner WebCallServer WebSDK package",
   "main": "./src/flashphoner-core.js",
   "types": "./src/flashphoner-core.d.ts",