@flashphoner/websdk 2.0.228 → 2.0.230

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

@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="../../dependencies/bootstrap/css/bootstrap.css">
     <link rel="stylesheet" href="hls-native.css">
     <title>HLS Native Player Minimal</title>
+    <script type="text/javascript" src="../../../../flashphoner.js"></script>
     <script type="text/javascript" src="../../dependencies/jquery/jquery-1.12.0.js"></script>
     <script type="text/javascript" src="../../dependencies/jquery/jquery-ui.js"></script>
     <script type="text/javascript" src="../../dependencies/js/utils.js"></script>

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

@@ -1,3 +1,4 @@
+var Browser = Flashphoner.Browser;
 var remoteVideo = null;
 
 function loadPlayerPage() {
@@ -10,6 +11,10 @@ function initPage() {
     $("#applyBtn").prop('disabled', false).text("Play").off('click').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);
+    }
 }
 
 function playBtnClick() {
@@ -32,7 +37,6 @@ function playBtnClick() {
         }
         else {
             $("#notifyFlash").text("Your browser doesn't support native HLS playback");
-            cleanRemoteVideo();
         }
     }
 }

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

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="hls-player.css">
     <link rel="stylesheet" href="video-js.css">
     <title>HLS VideoJS Player Minimal</title>
+    <script type="text/javascript" src="../../../../flashphoner.js"></script>
     <script type="text/javascript" src="../../dependencies/jquery/jquery-1.12.0.js"></script>
     <script type="text/javascript" src="../../dependencies/jquery/jquery-ui.js"></script>
     <script type="text/javascript" src="../../dependencies/js/utils.js"></script>

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

@@ -1,3 +1,4 @@
+var Browser = Flashphoner.Browser;
 var player = null;
 
 function loadPlayerPage() {
@@ -10,7 +11,7 @@ function initPage() {
     $("#applyBtn").prop('disabled', false).text("Play").off('click').click(playBtnClick);
     var remoteVideo = document.getElementById('remoteVideo');
     remoteVideo.className = "video-js vjs-default-skin";
-    player = videojs(remoteVideo);
+    player = initVideoJsPlayer(remoteVideo);
 }
 
 function playBtnClick() {
@@ -23,12 +24,23 @@ function playBtnClick() {
         if (key.length > 0 && token.length > 0) {
             videoSrc += "?" + key + "=" + token;
         }
+        player.on('loadedmetadata', function() {
+            console.log("Play with VideoJs");
+            player.play();
+        });
+        player.on('error', function() {
+            var error = player.error();
+            // Stop on error
+            stopBtnClick();
+            if (error && error.code == error.MEDIA_ERR_DECODE) {
+                // Restart playback in case of decode error
+                playBtnClick();
+            }
+        });
         player.src({
             src: videoSrc,
             type: "application/vnd.apple.mpegurl"
         });
-        console.log("Play with VideoJs");
-        player.play();
         onStarted();
     }
 }
@@ -76,8 +88,10 @@ function createRemoteVideo(parent) {
     remoteVideo.autoplay="autoplay";
     remoteVideo.type="application/vnd.apple.mpegurl";
     remoteVideo.className = "video-js vjs-default-skin";
+    remoteVideo.setAttribute("playsinline","");
+    remoteVideo.setAttribute("webkit-playsinline","");
     parent.appendChild(remoteVideo);
-    player = videojs(remoteVideo);
+    player = initVideoJsPlayer(remoteVideo);
 }
 
 
@@ -109,3 +123,24 @@ function highlightInput(input) {
 function removeHighlight(input) {
     input.closest('.form-group').removeClass("has-error");
 }
+
+function initVideoJsPlayer(video) {
+    var videoJsPlayer = videojs(video);
+    console.log("Using VideoJs " + videojs.VERSION);
+    if (Browser.isSafariWebRTC() && Browser.isiOS()) {
+        // iOS hack when using standard controls to leave fullscreen mode
+        var videoTag = getActualVideoTag();
+        if(videoTag) {
+            setWebkitFullscreenHandlers(videoTag);
+        }
+    }
+    return videoJsPlayer;
+}
+
+function getActualVideoTag() {
+    var videos = document.querySelectorAll("video");
+    if (videos && videos.length > 0) {
+        return videos[0];
+    }
+    return null;
+}

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

@@ -60,6 +60,8 @@
             <video id="remoteVideo" width="852" height="480"
                    controls="controls"
                    autoplay="autoplay"
+                   playsinline="playsinline"
+                   webkit-playsinline="webkit-playsinline"
                    type="application/vnd.apple.mpegurl"></video>
         </div>
     </div>

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

@@ -384,26 +384,33 @@
 .video-js.vjs-1-1 {
   width: 100%;
   max-width: 100%;
+}
+
+.video-js.vjs-fluid:not(.vjs-audio-only-mode),
+.video-js.vjs-16-9:not(.vjs-audio-only-mode),
+.video-js.vjs-4-3:not(.vjs-audio-only-mode),
+.video-js.vjs-9-16:not(.vjs-audio-only-mode),
+.video-js.vjs-1-1:not(.vjs-audio-only-mode) {
   height: 0;
 }
 
-.video-js.vjs-16-9 {
+.video-js.vjs-16-9:not(.vjs-audio-only-mode) {
   padding-top: 56.25%;
 }
 
-.video-js.vjs-4-3 {
+.video-js.vjs-4-3:not(.vjs-audio-only-mode) {
   padding-top: 75%;
 }
 
-.video-js.vjs-9-16 {
+.video-js.vjs-9-16:not(.vjs-audio-only-mode) {
   padding-top: 177.7777777778%;
 }
 
-.video-js.vjs-1-1 {
+.video-js.vjs-1-1:not(.vjs-audio-only-mode) {
   padding-top: 100%;
 }
 
-.video-js.vjs-fill {
+.video-js.vjs-fill:not(.vjs-audio-only-mode) {
   width: 100%;
   height: 100%;
 }
@@ -416,6 +423,10 @@
   height: 100%;
 }
 
+.video-js.vjs-audio-only-mode .vjs-tech {
+  display: none;
+}
+
 body.vjs-full-window {
   padding: 0;
   margin: 0;
@@ -751,7 +762,8 @@ body.vjs-full-window {
   background-color: rgba(43, 51, 63, 0.7);
 }
 
-.vjs-has-started .vjs-control-bar {
+.vjs-has-started .vjs-control-bar,
+.vjs-audio-only-mode .vjs-control-bar {
   display: flex;
   visibility: visible;
   opacity: 1;
@@ -771,9 +783,11 @@ body.vjs-full-window {
   display: none !important;
 }
 
-.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar,
+.vjs-audio-only-mode.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
   opacity: 1;
   visibility: visible;
+  pointer-events: auto;
 }
 
 .vjs-has-started.vjs-no-flex .vjs-control-bar {
@@ -790,6 +804,12 @@ body.vjs-full-window {
   flex: none;
 }
 
+.video-js .vjs-control.vjs-visible-text {
+  width: auto;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
 .vjs-button > .vjs-icon-placeholder:before {
   font-size: 1.8em;
   line-height: 1.67;
@@ -805,7 +825,7 @@ body.vjs-full-window {
   text-shadow: 0em 0em 1em white;
 }
 
-.video-js .vjs-control-text {
+.video-js *:not(.vjs-visible-text) > .vjs-control-text {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
@@ -1227,18 +1247,16 @@ body.vjs-full-window {
   height: 100%;
 }
 
-.vjs-has-started .vjs-poster {
+.vjs-has-started .vjs-poster,
+.vjs-using-native-controls .vjs-poster {
   display: none;
 }
 
-.vjs-audio.vjs-has-started .vjs-poster {
+.vjs-audio.vjs-has-started .vjs-poster,
+.vjs-has-started.vjs-audio-poster-mode .vjs-poster {
   display: block;
 }
 
-.vjs-using-native-controls .vjs-poster {
-  display: none;
-}
-
 .video-js .vjs-live-control {
   display: flex;
   align-items: flex-start;
@@ -1346,6 +1364,7 @@ body.vjs-full-window {
   pointer-events: none;
 }
 
+.video-js.vjs-controls-disabled .vjs-text-track-display,
 .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
   bottom: 1em;
 }
@@ -1372,6 +1391,7 @@ video::-webkit-media-text-track-display {
   transform: translateY(-3em);
 }
 
+.video-js.vjs-controls-disabled video::-webkit-media-text-track-display,
 .video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
   transform: translateY(-1.5em);
 }
@@ -1380,10 +1400,18 @@ video::-webkit-media-text-track-display {
   cursor: pointer;
   flex: none;
 }
+.video-js.vjs-audio-only-mode .vjs-picture-in-picture-control {
+  display: none;
+}
+
 .video-js .vjs-fullscreen-control {
   cursor: pointer;
   flex: none;
 }
+.video-js.vjs-audio-only-mode .vjs-fullscreen-control {
+  display: none;
+}
+
 .vjs-playback-rate > .vjs-menu-button,
 .vjs-playback-rate .vjs-playback-rate-value {
   position: absolute;
@@ -1539,10 +1567,18 @@ video::-webkit-media-text-track-display {
     border-top-color: #73859f;
   }
 }
+.video-js.vjs-audio-only-mode .vjs-captions-button {
+  display: none;
+}
+
 .vjs-chapters-button .vjs-menu ul {
   width: 24em;
 }
 
+.video-js.vjs-audio-only-mode .vjs-descriptions-button {
+  display: none;
+}
+
 .video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
   vertical-align: middle;
   display: inline-block;
@@ -1556,6 +1592,10 @@ video::-webkit-media-text-track-display {
   line-height: inherit;
 }
 
+.video-js.vjs-audio-only-mode .vjs-subs-caps-button {
+  display: none;
+}
+
 .video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
   vertical-align: middle;
   display: inline-block;
@@ -1574,57 +1614,33 @@ video::-webkit-media-text-track-display {
 .video-js.vjs-layout-small .vjs-duration,
 .video-js.vjs-layout-small .vjs-remaining-time,
 .video-js.vjs-layout-small .vjs-playback-rate,
-.video-js.vjs-layout-small .vjs-chapters-button,
-.video-js.vjs-layout-small .vjs-descriptions-button,
-.video-js.vjs-layout-small .vjs-captions-button,
-.video-js.vjs-layout-small .vjs-subtitles-button,
-.video-js.vjs-layout-small .vjs-audio-button,
 .video-js.vjs-layout-small .vjs-volume-control, .video-js.vjs-layout-x-small .vjs-current-time,
 .video-js.vjs-layout-x-small .vjs-time-divider,
 .video-js.vjs-layout-x-small .vjs-duration,
 .video-js.vjs-layout-x-small .vjs-remaining-time,
 .video-js.vjs-layout-x-small .vjs-playback-rate,
-.video-js.vjs-layout-x-small .vjs-chapters-button,
-.video-js.vjs-layout-x-small .vjs-descriptions-button,
-.video-js.vjs-layout-x-small .vjs-captions-button,
-.video-js.vjs-layout-x-small .vjs-subtitles-button,
-.video-js.vjs-layout-x-small .vjs-audio-button,
 .video-js.vjs-layout-x-small .vjs-volume-control, .video-js.vjs-layout-tiny .vjs-current-time,
 .video-js.vjs-layout-tiny .vjs-time-divider,
 .video-js.vjs-layout-tiny .vjs-duration,
 .video-js.vjs-layout-tiny .vjs-remaining-time,
 .video-js.vjs-layout-tiny .vjs-playback-rate,
-.video-js.vjs-layout-tiny .vjs-chapters-button,
-.video-js.vjs-layout-tiny .vjs-descriptions-button,
-.video-js.vjs-layout-tiny .vjs-captions-button,
-.video-js.vjs-layout-tiny .vjs-subtitles-button,
-.video-js.vjs-layout-tiny .vjs-audio-button,
 .video-js.vjs-layout-tiny .vjs-volume-control {
-  display: none !important;
+  display: none;
 }
-.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
-.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,
-.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
-.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,
-.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
-.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active,
-.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
+.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover {
   width: auto;
   width: initial;
 }
-.video-js.vjs-layout-x-small:not(.vjs-liveui) .vjs-subs-caps-button, .video-js.vjs-layout-x-small:not(.vjs-live) .vjs-subs-caps-button, .video-js.vjs-layout-tiny .vjs-subs-caps-button {
+.video-js.vjs-layout-x-small .vjs-progress-control, .video-js.vjs-layout-tiny .vjs-progress-control {
   display: none;
 }
-.video-js.vjs-layout-x-small.vjs-liveui .vjs-custom-control-spacer, .video-js.vjs-layout-tiny .vjs-custom-control-spacer {
+.video-js.vjs-layout-x-small .vjs-custom-control-spacer {
   flex: auto;
   display: block;
 }
-.video-js.vjs-layout-x-small.vjs-liveui.vjs-no-flex .vjs-custom-control-spacer, .video-js.vjs-layout-tiny.vjs-no-flex .vjs-custom-control-spacer {
+.video-js.vjs-layout-x-small.vjs-no-flex .vjs-custom-control-spacer {
   width: auto;
 }
-.video-js.vjs-layout-x-small.vjs-liveui .vjs-progress-control, .video-js.vjs-layout-tiny .vjs-progress-control {
-  display: none;
-}
 
 .vjs-modal-dialog.vjs-text-track-settings {
   background-color: #2B333F;