diff --git a/server/src/main/resources/html/static/index.html b/server/src/main/resources/html/static/index.html
index 4962096a..5778d8eb 100644
--- a/server/src/main/resources/html/static/index.html
+++ b/server/src/main/resources/html/static/index.html
@@ -203,7 +203,7 @@
 	<div id="player-window" class="modal">
   		<div class="modal-content">
   			<span class="close">&times;</span>
-  			<video id="player" preload="none" controls width="100%">
+  			<video id="player" preload="none" controls width="100%" height="800">
   			</video>
   		</div>
 	</div>
@@ -389,32 +389,40 @@
 		};
 		
 		function play(recording) {
-			if (Hls.isSupported()) {
-			    var video = document.getElementById('player');
-				var hls = new Hls();
-				hls.attachMedia(video);
-				hls.on(Hls.Events.MEDIA_ATTACHED, function () {
-					let src = recording.playlist;
-					let hmacOfPath = CryptoJS.HmacSHA256(src, hmac);
-					src = '..' + src; 
-					if (hmac.length > 0) {
-						src += "?hmac=" + hmacOfPath;
-					}
-					console.log(src);
-					hls.loadSource(src);
-			        hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
-						console.log("manifest loaded, found " + data.levels.length + " quality level");
-						$('#player-window').css('display', 'block');
-						video.play();
-			        });
-					
-				});
-				
-			} else {
-				$.notify('Loading HLS video streaming support failed', 'error');
-			 	console.log('HLS is not supported');
+		    let src = recording.playlist;
+			src = '..' + src; 
+			let hmacOfPath = CryptoJS.HmacSHA256(src, hmac);
+			if (hmac.length > 0) {
+				src += "?hmac=" + hmacOfPath;
 			}
-			
+
+			if(console) console.log('Playing video from', src);
+
+			if(src.indexOf('.mp4') > 0) {
+		    	var video = document.getElementById('player');
+		    	video.src = src;
+		    	$('#player-window').css('display', 'block');
+		    	video.play();
+		    } else {		    	
+				if (Hls.isSupported()) {
+				    var video = document.getElementById('player');
+				    var hls = new Hls();
+					hls.attachMedia(video);
+					hls.on(Hls.Events.MEDIA_ATTACHED, function () {
+						console.log(src);
+						hls.loadSource(src);
+				        hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
+							console.log("manifest loaded, found " + data.levels.length + " quality level");
+							$('#player-window').css('display', 'block');
+							video.play();
+				        });
+						
+					});
+				} else {
+					$.notify('Loading HLS video streaming support failed', 'error');
+				 	console.log('HLS is not supported');
+				}
+		    }
 		}
 		
 		function calculateSize(sizeInByte) {
@@ -656,7 +664,11 @@
 						recording.ko_progressString = ko.observable(recording.progress === -1 ? '' : recording.progress);
 						recording.ko_size = ko.observable(calculateSize(recording.sizeInByte));
 						recording.ko_status = ko.observable(recording.status);
-						recording.playlist = '/hls' + recording.path + '/playlist.m3u8';
+						if (recording.path.endsWith('.mp4')) {
+							recording.playlist = '/hls' + recording.path;
+						} else {						
+							recording.playlist = '/hls' + recording.path + '/playlist.m3u8';
+						}
 						observableRecordingsArray.push(recording);
 					}
 				}