HTML5 player mobile compatibility issues fixed

upload/player/CB_html5_player/html5_player.html

@@ -1,7 +1,6 @@
 {if $flashplayer}
 <div id="mediaplayer">
 </div>
-
 <script type="text/javascript" src="{$html5_player_url}/flashplayer.js"></script>
 <script type="text/javascript">
 
@@ -126,15 +125,15 @@ jwplayer("mediaplayer").setup( {ldelim}
       </div>
     </div>
 
-    
+
     <div class="btmControl">
       <div class="btnPlay hbtn" title="Play/Pause video"></div>
-      <div class="sound sound2 hbtn" title="Mute/Unmute sound"></div>
-      <div class="volume" title="Set volume">
+      <div class="sound sound2 hbtn" id="soundIcon" title="Mute/Unmute sound"></div>
+      <div class="volume" id="volSec" title="Set volume" >
         <span class="volumeBar"></span>
       </div>
       <div class="time">
-        <span class="fcurrent">00:00</span> / 
+        <span class="fcurrent">00:00</span>/ 
         <span class="fduration">00:00</span>
       </div>
       <div class="btnFS enterbtnFs hbtn" id="fs" title="Switch to full screen"></div>

upload/player/CB_html5_player/html5_player.js

@@ -149,10 +149,12 @@ $(document).ready(function()
 
 
     // on hover controils and captions get showed
+    
     var on_player = false;
 	$('.cont').on("mouseenter",function(){
 		on_player = true;
 		caption_show();
+
 	});
 
 	// on hover controils and captions get showed
@@ -183,9 +185,34 @@ $(document).ready(function()
 		$('.timeBar').css('width',perc+'%');	
 		$('.fcurrent').text(timeFormat(currentPos));	
 	});
-	
-	
-	
+
+	/*
+	* Changes made by *Saqib Razzaq*
+	* checks if windows size is less than 400
+	* if it is, hides volumebar and shows it when
+	* you hover over vol icon hiding video time	once  
+	* you move away from sound icon it hides itself showing video time
+	*/
+
+	if ($( window ).width() < 400)
+        {
+	$("#volSec").hide();
+	$("#soundIcon").mouseenter(function(){
+		$("#volSec").show();
+		$(".fcurrent").hide();
+	});
+	$(".volume").mouseleave(function(){
+		$("#volSec").hide();
+		$(".fcurrent").show();
+	});
+	}
+
+	/* 
+	* ==================
+	* volume changes end
+	* ==================
+	*/ 
+
 	//CONTROLS EVENTS
 	//video screen and play button clicked
 	video.on('click', function() { playpause(); } );

upload/player/CB_html5_player/style.css

@@ -364,7 +364,7 @@ color: #fff;
 	float:left;
 	margin-top:16px;
 	margin-right:20px;
-	margin-left: 3px;
+	margin-left: 0px;
 }
 .volumeBar{
 	display:block;
@@ -930,3 +930,12 @@ transform: rotate(900deg);
 }
 
 }
+@media (max-width: 400px) {
+  .fduration, #volSec, #path, .soundm, .title, .user, .init {
+    display: none;
+    }
+  .init {
+	background:url() no-repeat 50% 50% !important;
+	cursor:pointer;
+	}
+}