@flashphoner/websdk 2.0.223 → 2.0.225

package/docTemplate/README.md

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

package/examples/demo/streaming/embed_player/player.css

@@ -8,59 +8,41 @@ body {
     margin: 0;
 }
 
-video:-webkit-full-screen {
-    border-radius: 1px;
+.video {
+    margin: 0px auto;
+    height: 100%;
+    background: #000;
 }
 
 .display, video, canvas, object {
     width: 100%;
     height: 100%;
+    position: relative;
 }
 
-#error_output {
-    width: 100%;
-    position: absolute;
-    color: white;
-    margin-top: 10px !important;
-    text-align: center;
-}
-
-.player {
-    box-sizing: border-box;
-    height: 40px;
-    -moz-box-sizing: border-box;
-    float: left;
-    font-family: Arial, sans-serif;
-    position: fixed;
-    padding: 0;
-    bottom: 0;
-    z-index: 2147483647 !important;
-    opacity: 0.8;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-    -webkit-transition: opacity 0.3s ease-in;
-    transition: opacity 0.3s ease-in;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    user-select: none;
-}
-
-.video {
-    margin: 0px auto;
-    height: 100%;
-    background: #000;
+video:-webkit-full-screen {
+    border-radius: 1px;
 }
 
-.video:hover .player {
-    opacity: 1;
+/* Prevent stretched picture in full screen mode */
+canvas:-webkit-full-screen {
+    width: initial;
+    height: initial;
 }
 
-.player .button-holder {
-    position: relative;
-    left: 10px;
+canvas:-moz-full-screen {
+    width: initial;
+    height: initial;
 }
 
-.player .volume-icon {
-    border-right-color: #fff;
+#status {
+    width: 100%;
+    color: white;
+    position: absolute;
+    text-align: center;
+    display: block;
+    background: rgba(0, 0, 0, 0.3);
+    z-index: 2147483647 !important;
 }
 
 #play {
@@ -68,13 +50,12 @@ video:-webkit-full-screen {
     cursor: pointer;
     transition: 0.3s;
     -webkit-transition: 0.3s;
-    transition: 0.3s;
-    position: absolute;;
+    position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(1);
-    background: #00CBFF;
     border-radius: 26%;
+    z-index: 2147483647 !important;
 }
 
 #play img {
@@ -82,399 +63,30 @@ video:-webkit-full-screen {
     width: 100%;
 }
 
-#play:hover {
-    transform: translate(-50%, -50%) scale(1.05);
+.play {
+    background: #00CBFF;
+}
+
+.stop {
     -webkit-box-shadow: inset 0px 1px 29px 0px rgba(102, 31, 36, 0.75);
     -moz-box-shadow: inset 0px 1px 29px 0px rgba(102, 31, 36, 0.75);
     box-shadow: inset 0px 1px 29px 0px rgba(102, 31, 36, 0.75);
 }
 
-.player .volume-icon {
-    border-right-color: rgba(74, 74, 74, 0.8);
-}
-
-.play-pause {
-    display: inline-block;
-    font-size: 1.5em;
-    float: left;
-    width: 35px;
-    margin: 6px 0 0 2%;
-    cursor: pointer;
-    font-variant: small-caps;
-}
-
-.play-button {
-    width: 21px;
-    height: 20px;
-    position: relative;
-}
-
-.play-button:after {
-    content: '';
-    width: 0;
-    height: 0;
-    position: absolute;;
-    top: 6px;
-    left: 6px;
-    border: 8px solid transparent;
-    border-right: none;
-    border-left: 16px solid #B8B8B8;
-}
-
-.play-button:hover:after {
-    border-left: 16px solid #FFF;
-}
-
-.player .play, .player .pause-button {
-    -webkit-transition: all 0.1s ease-out;
-    transition: all 0.1s ease-out;
-    opacity: 0.9;
-}
-
-.player .play .pause-button, .player .pause .play-button {
-    display: none;
-}
-
-.play-button {
-    position: relative;;
-}
-
-.player .pause-button {
-    padding: 5px 0 0 2px;
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    height: 34px;
-}
-
-.player .pause-button span {
-    width: 18px;
-    height: 18px;
-    float: left;
-    display: block;
-    background: #FFF;
-}
-
-.player .play:hover {
-    opacity: 1;
-    -webkit-transition: 0.1s;
-    transition: 0.1s;
-}
-
-.player .play:active, .pause-button:active span {
-    opacity: 1;
-}
-
-.player .pause-button:hover span {
-    opacity: 1;
-    -webkit-transition: 0.1s;
-    transition: 0.1s;
-}
-
-.player .pause-button:active span {
-    opacity: 1;
-    -webkit-transition: 0.1s;
-    transition: 0.1s;
-}
-
-.player .status {
-    padding: 10px 60px 0 !important;
-    text-align: center;
-    position: absolute;
-    width: 100%;
-}
-
-.player .volume {
-    position: relative;
-    float: left;
-    margin: 0;
-    width: 40px;
-    height: 100%;
-    -webkit-transition: all 0.1s linear;
-    transition: all 0.1s linear;
-    opacity: 0.9;
-}
-
-.player .volume:hover {
-    opacity: 1;
-    -webkit-transition: all 0.1s linear;
-    transition: all 0.1s linear;
-}
-
-/* Volume slider */
-.volume-range-block {
-    float: left;
-    width: 0;
-    min-height: 35px;
-    position: relative;
-    padding: 18px 0 0 0;
-    overflow: hidden;
-    -webkit-transition: width 0.17s linear;
-    transition: width 0.17s linear;
-    z-index: 10;
-
-}
-
-.range-bar {
-}
-
-.volume-range-block.open {
-    width: 13% !important;
-    overflow: visible;
-}
-
-.volume-range-block.open-width-full {
-    width: 65px !important;
-    overflow: visible;
-}
-
-.volume-range-block:focus, .volume-range-block:active {
-    outline: none;
-}
-
-.player .volume:hover + .volume-range-block, .volume-range-block:hover, #volume-range:focus .volume-range-block {
-    width: 13%;
-    overflow: visible;
-    -webkit-transition: width 0.17s linear;
-    transition: width 0.17s linear;
-}
-
-.player .volume-icon:hover {
-    opacity: 1;
-    -webkit-transition: all 0.1s linear;
-    transition: all 0.1s linear;
-}
-
-.player .volume-holder {
-    display: none !important;
-    height: 100px;
-    width: 100%;
-    position: absolute;
-    display: none;
-    left: 0;
-    border-radius: 5px 5px 0 0;
-    top: -100px;
-}
-
-.player .volume-bar-holder {
-    width: 20px;
-    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.3);
-    margin: 15px auto;
-    height: 80px;
-    border-radius: 5px;
-    position: relative;
-    cursor: pointer;
-}
-
-.player .volume-button {
-    background: #fff;
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-    border-radius: 30px;
-    width: 20px;
-    height: 20px;
-}
-
-.player .volume-button-holder {
-    position: relative;
-    top: -10px;
-}
-
-.player .volume-bar {
-    background: #33b5d5;
-    box-shadow: inset -30px 0px 69px -20px #89f6f5;
-    border-radius: 5px;
-    width: 100%;
-    height: 100%;
+.loader {
+    border: 10px solid #d3d3d3; /* Light grey */
+    border-top: 10px solid #ffffff; /* White */
+    border-radius: 50%;
+    width: 70px;
+    height: 70px;
+    animation: spin 2s linear infinite;
     position: absolute;
-    bottom: 0;
-}
-
-.player .fullscreen {
-    width: 40px;
-    float: right;
-    margin: 0 2% 0 0;
-    height: 100%;
-}
-
-@-webkit-keyframes move {
-    from {
-        -webkit-transform: scale(3.5);
-        -moz-transform: scale(3.5);
-        -o-transform: scale(3.5);
-        -ms-transform: scale(3.5);
-        transform: scale(3.5);
-    }
-    70% {
-        -webkit-transform: scale(4.2);
-        -moz-transform: scale(4.2);
-        -o-transform: scale(4.2);
-        -ms-transform: scale(4.2);
-        transform: scale(4.2);
-    }
-    73% {
-        -webkit-transform: scale(4.2);
-        -moz-transform: scale(4.2);
-        -o-transform: scale(4.2);
-        -ms-transform: scale(4.2);
-        transform: scale(4.2);
-    }
-    to {
-        -webkit-transform: scale(3.5);
-        -moz-transform: scale(3.5);
-        -o-transform: scale(3.5);
-        -ms-transform: scale(3.5);
-        transform: scale(3.5);
-    }
-}
-
-@keyframes move {
-    from {
-        -webkit-transform: scale(3.5);
-        -moz-transform: scale(3.5);
-        -o-transform: scale(3.5);
-        -ms-transform: scale(3.5);
-        transform: scale(3.5);
-    }
-    70% {
-        -webkit-transform: scale(4.2);
-        -moz-transform: scale(4.2);
-        -o-transform: scale(4.2);
-        -ms-transform: scale(4.2);
-        transform: scale(4.2);
-    }
-    73% {
-        -webkit-transform: scale(4.2);
-        -moz-transform: scale(4.2);
-        -o-transform: scale(4.2);
-        -ms-transform: scale(4.2);
-        transform: scale(4.2);
-    }
-    to {
-        -webkit-transform: scale(3.5);
-        -moz-transform: scale(3.5);
-        -o-transform: scale(3.5);
-        -ms-transform: scale(3.5);
-        transform: scale(3.5);
-    }
-}
-
-.player .fullscreen .fullscreenBtn {
-    width: 10px;
-    height: 20px;
-    cursor: pointer;
-    border-radius: 3px;
-    opacity: 0.9;
-    -webkit-transition: 0.1s;
-    transition: 0.1s;
-    -webkit-transform: scale(3.5);
-    -moz-transform: scale(3.5);
-    -o-transform: scale(3.5);
-    -ms-transform: scale(3.5);
-    transform: scale(3.5);
-    display: block;
-    position: relative;
-    top: 11px;
-    margin: 0px auto;
-    background: transparent !important;
-}
-
-.player .fullscreen:hover .fullscreenBtn {
-    -webkit-animation: move 0.3s ease-in-out;
-    -moz-animation: move 0.3s ease-in-out;
-    -o-animation: move 0.3s ease-in-out;
-    -ms-animation: move 0.3s ease-in-out;
-    animation: move 0.3s ease-in-out;
-    opacity: 1;
-    -webkit-transition: 0.1s;
-    transition: 0.1s;
-}
-
-/* Hide standard controls in Chrome, Opera, Safari */
-
-::-webkit-media-controls {
-    display: none !important;
-}
-
-video::-webkit-media-controls {
-    display: none !important;
-}
-
-video::-webkit-media-controls-enclosure {
-    display: none !important;
-}
-
-/* Resize controls in full screen modes */
-
-.player.fullscreenon .play-pause, .player.fullscreenon .volume, .player.fullscreenon .volume-range-block {
-    -webkit-transform: scale(1.3);
-    transform: scale(1.3);
-}
-
-.player.fullscreenon .fullscreenBtn {
-    -webkit-transform: scale(5);
-    transform: scale(5);
-}
-
-.player.fullscreenon .volume:hover + .volume-range-block, .player.fullscreenon .volume-range-block:hover, .player.fullscreenon #volume-range:focus .volume-range-block {
-    width: 6% !important;
-}
-
-.fullscreen-vol.open-width {
-    width: 6% !important;
-    -webkit-transition: width 0.17s linear;
-    transition: width 0.17s linear;
-}
-
-.player.fullscreenon .volume-range-block {
-    width: 6%;
-    margin-left: 1%;
-}
-
-#slider {
-    background-color: #696c71;
-    border: none;
-    display: block;
-    height: 4px;
-    position: relative;
-    width: 100%;
-}
-
-.ui-slider-range {
-    background: #FFF;
-}
-
-.ui-slider-handle {
-    width: 30px !important;
-    height: 30px !important;
-    top: 50% !important;
-    background: transparent !important;
-    outline: none !important;
-    margin: -15px 0 0 -15px;
-    border: none !important;
-
-}
-
-.ui-slider-handle:after {
-    content: '';
-    background: #FFF;
     top: 50%;
     left: 50%;
-    border-radius: 100%;
-    cursor: pointer;
-    height: 13px;
-    margin: -6.5px 0 0 -6.5px;
-    position: absolute;
-    width: 13px;
-    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-}
-
-/* Prevent stretched picture in full screen mode */
-canvas:-webkit-full-screen {
-    width: initial;
-    height: initial;
+    margin: -40px 0 0 -40px;
 }
 
-canvas:-moz-full-screen {
-    width: initial;
-    height: initial;
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 }

package/examples/demo/streaming/embed_player/player.html

@@ -3,78 +3,20 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="apple-mobile-web-app-capable" content="yes">
     
-    <link rel="stylesheet" href="../../dependencies/bootstrap/css/bootstrap.css">
-    <link rel="stylesheet" href="../../dependencies/bootstrap/font-awesome/css/font-awesome.min.css">
-    <link rel="stylesheet" href="jquery-ui.css">
     <link rel="stylesheet" href="player.css">
 
     <title>Player</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="jquery.ui.touch-punch.min.js"></script>
-    <script type="text/javascript" src="../../dependencies/js/utils.js"></script>
+    <script type="text/javascript" src="utils.js"></script>
     <script type="text/javascript" src="player.js"></script>
 </head>
 <body onload="init_page()">
-<div class="video">
-    <div id="error_output"></div>
+<div class="video" id="container">
+    <div id="status"></div>
     <div id="play"><img src="images/play.png" alt=""></div>
-    <i id="preloader" class="fa fa-spinner fa-pulse fa-3x fa-fw" aria-hidden="true"
-       style="color: #ffffff; position: absolute; top: 40%; left: 45.5%;"></i>
+    <div id="preloader" class="loader" aria-hidden="true"></div>
     <div class="display" id="remoteVideo"></div>
-    <div class="player">
-        <div class="status"></div>
-        <div class="play-pause">
-            <span class="play-button"></span>
-            <div class="pause-button">
-                <span> </span>
-            </div>
-        </div>
-        <div class="volume" style="cursor: pointer">
-
-            <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
-            				<defs>
-            								<clipPath>
-            												<path d="m 14.35,-0.14 -5.86,5.86 20.73,20.78 5.86,-5.91 z"></path>
-            												<path d="M 7.07,6.87 -1.11,15.33 19.61,36.11 27.80,27.60 z"></path>
-            												<path d="M 9.09,5.20 6.47,7.88 26.82,28.77 29.66,25.99 z" transform="translate(0, 0)"></path>
-            								</clipPath>
-            								<clipPath>
-            												<path d="m -11.45,-15.55 -4.44,4.51 20.45,20.94 4.55,-4.66 z" transform="translate(0, 0)"></path>
-            								</clipPath>
-            				</defs>
-            				<path style="fill: #fff;" clip-path="url(#ytp-svg-volume-animation-mask)" d="M8,21 L12,21 L17,26 L17,10 L12,15 L8,15 L8,21 Z M19,14 L19,22 C20.48,21.32 21.5,19.77 21.5,18 C21.5,16.26 20.48,14.74 19,14 Z" fill="#fff" id="ytp-svg-12"></path>
-            </svg>
-        </div>
-
-        <div class="volume-range-block" tabindex="0">
-        				<input type="hidden" value="50" id="volume-range">
-                <div id="slider" ></div>
-        </div>
-
-        <div class="fullscreen">
-            <div class="fullscreenBtn">
-            				<svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
-            								<g>
-            												<path style="fill: #fff;" d="m 10,16 2,0 0,-4 4,0 0,-2 L 10,10 l 0,6 0,0 z"></path>
-            								</g>
-            								<g>
-            												<path style="fill: #fff;" d="m 20,10 0,2 4,0 0,4 2,0 L 26,10 l -6,0 0,0 z"></path>
-            								</g>
-            								<g>
-            												<path style="fill: #fff;" d="m 24,24 -4,0 0,2 L 26,26 l 0,-6 -2,0 0,4 0,0 z"></path>
-            								</g>
-            								<g>
-            												<path style="fill: #fff;" d="M 12,20 10,20 10,26 l 6,0 0,-2 -4,0 0,-4 0,0 z"></path>
-            								</g>
-
-
-            </div>
-        </div>
-    </div>
 </div>
 </body>
-</html>
+</html>