diff --git a/dashboard-ui/css/mediaplayer-video.css b/dashboard-ui/css/mediaplayer-video.css
new file mode 100644
index 0000000000..56dff52da7
--- /dev/null
+++ b/dashboard-ui/css/mediaplayer-video.css
@@ -0,0 +1,284 @@
+#mediaPlayer .mediaPlayerFlyout {
+    bottom: 64px;
+}
+
+#videoBackdrop {
+    z-index: 99990;
+    position: fixed;
+    background-color: transparent;
+    background-color: rgba(0, 0, 0, 0.6);
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+#videoPlayer {
+    z-index: 99997;
+    background-color: #1d1d1d;
+    position: fixed;
+    border: 1px solid #333;
+    top: 50%;
+    left: 50%;
+    margin-left: -170px;
+    margin-top: -115px;
+}
+
+.itemVideo {
+    background-color: #000;
+    margin: 20px 20px 80px;
+    width: 320px;
+    height: 181px;
+}
+
+#videoControls {
+    z-index: 99999;
+    padding: 0 20px 10px;
+    height: 80px;
+    position: absolute;
+    top: auto;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+#videoControls .positionSliderContainer .ui-slider-track {
+    margin: 0 !important;
+}
+
+#videoControls .positionSliderContainer {
+    display: block;
+    width: 100%;
+    margin-top: 0px;
+}
+
+#videoControls .currentTime {
+    margin-top: 25px;
+}
+
+/* Fullscreen
+    ***************************************/
+
+#videoPlayer.fullscreenVideo,
+#videoPlayer.fullscreenVideo .itemVideo {
+    position: fixed !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    right: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    border: 0 !important;
+    margin: 0 !important;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+#videoPlayer.fullscreenVideo #videoControls {
+    opacity: 0.3;
+    background-color: #1d1d1d;
+}
+
+#videoPlayer.fullscreenVideo #videoControls:hover {
+    opacity: 0.8;
+}
+
+#videoPlayer.fullscreenVideo .inactive {
+    display: none;
+}
+
+#videoPlayer.fullscreenVideo:hover .active {
+    display: block;
+}
+
+/* Media queries
+    ***************************************/
+
+@media all and (min-width: 640px) and (min-height: 360px) {
+    #mediaPlayer .itemVideo:not(.fullscreenVideo) {
+        width: 480px;
+        height: 271px;
+    }
+
+    #videoPlayer {
+        margin-left: -250px;
+        margin-top: -160px;
+    }
+}
+
+@media all and (min-width: 800px) and (min-height: 450px) {
+    #mediaPlayer .itemVideo:not(.fullscreenVideo) {
+        width: 640px;
+        height: 362px;
+    }
+
+    #videoPlayer {
+        margin-left: -330px;
+        margin-top: -205px;
+    }
+}
+
+@media all and (min-width: 960px) and (min-height: 540px) {
+    #mediaPlayer .itemVideo:not(.fullscreenVideo) {
+        width: 720px;
+        height: 406px;
+    }
+
+    #videoPlayer {
+        margin-left: -370px;
+        margin-top: -228px;
+    }
+}
+
+@media all and (min-width: 1200px) and (min-height: 720px) {
+    #mediaPlayer .itemVideo:not(.fullscreenVideo) {
+        width: 1080px;
+        height: 610px;
+    }
+
+    #videoPlayer {
+        margin-left: -550px;
+        margin-top: -329px;
+    }
+}
+
+@media all and (min-width: 1440px) and (min-height: 720px) {
+    #mediaPlayer .itemVideo:not(.fullscreenVideo) {
+        width: 1080px;
+        height: 610px;
+    }
+
+    #videoPlayer {
+        margin-left: -550px;
+        margin-top: -329px;
+    }
+}
+
+/****************************************/
+
+@media all and (max-width: 1200px), all and (max-height: 720px) {
+    #mediaPlayer .volumeSliderContainer, #mediaPlayer .sendMediaButton {
+        display: none!important;
+    }
+}
+
+@media all and (max-width: 960px), all and (max-height: 550px) {
+    #mediaPlayer .volumeSliderContainer, #mediaPlayer .audioTracksButton, #mediaPlayer .chaptersButton, #mediaPlayer .sendMediaButton {
+        display: none!important;
+    }
+}
+
+@media all and (max-width: 800px), all and (max-height: 460px) {
+    #mediaPlayer .volumeButton, #mediaPlayer .volumeSliderContainer, #mediaPlayer .muteButton, #mediaPlayer .unmuteButton, #mediaPlayer .nowPlayingMediaInfo, #mediaPlayer .sendMediaButton {
+        display: none!important;
+    }
+}
+
+@media all and (max-width: 640px), all and (max-height: 365px) {
+    #mediaPlayer .chaptersButton, #mediaPlayer .audioTracksButton, #mediaPlayer .qualityButton, #mediaPlayer .subtitleButton {
+        display: none!important;
+    }
+
+    #mediaPlayer .currentTime {
+        margin-top: 15px;
+    }
+}
+
+@media all and (max-width: 500px) {
+    #mediaPlayer .previousTrackButton, #mediaPlayer .nextTrackButton {
+        display: none!important;
+    }
+}
+
+@media all and (max-width: 400px) {
+    #mediaPlayer .playlistButton {
+        display: none!important;
+    }
+}
+
+/****************************************/
+
+.status {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -75px;
+    margin-left: -75px;
+    width: 150px;
+    height: 150px;
+    z-index: 99999;
+}
+
+#play {
+    background-image: url(images/media/play.png);
+    opacity: 0;
+    display: none;
+}
+
+#pause {
+    background-image: url(images/media/pause.png);
+    opacity: 0;
+    display: none;
+}
+
+.fadeOut {
+    animation-name: fadeOut;
+    -webkit-animation-name: fadeOut;
+    animation-duration: .25s;
+    -webkit-animation-duration: .25s;
+    animation-timing-function: ease-in-out;
+    -webkit-animation-timing-function: ease-in-out;
+    visibility: visible !important;
+}
+
+@keyframes fadeOut {
+    0% {
+        transform: scale(.25);
+        opacity: 0.7;
+    }
+
+    60% {
+        transform: scale(.5);
+        opacity: 0.5;
+    }
+
+    80% {
+        transform: scale(.75);
+        opacity: 0.3;
+    }
+
+    100% {
+        transform: scale(1);
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes fadeOut {
+    0% {
+        -webkit-transform: scale(.25);
+        opacity: 0.7;
+    }
+
+    60% {
+        -webkit-transform: scale(.5);
+        opacity: 0.5;
+    }
+
+    80% {
+        -webkit-transform: scale(.75);
+        opacity: 0.3;
+    }
+
+    100% {
+        -webkit-transform: scale(1);
+        opacity: 0;
+    }
+}
+
+.cursor-active {
+    cursor: default;
+}
+
+.cursor-inactive {
+    cursor: none;
+}
\ No newline at end of file
diff --git a/dashboard-ui/css/mediaplayer.css b/dashboard-ui/css/mediaplayer.css
index 62a1f25e18..3ed4d78b89 100644
--- a/dashboard-ui/css/mediaplayer.css
+++ b/dashboard-ui/css/mediaplayer.css
@@ -1,36 +1,17 @@
 /* Now playing bar */
 .nowPlayingBar {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    padding: 6px 0 24px 0;
+    border-top: 2px solid green;
 }
 
     .nowPlayingBar .barBackground {
-        border-top: 2px solid #08b;
+        border-top: 2px solid green;
         position: absolute;
+        margin: -8px -0.5em -26px !important;
         width: 100%;
         height: 100%;
     }
 
-    #videoPlayer.fullscreenVideo .nowPlayingBar {
-        opacity: 0.5;
-    }
-
-    #videoPlayer.fullscreenVideo .inactive {
-        -webkit-transition: top 0.6s ease-in-out;
-        -moz-transition: top 0.6s ease-in-out;
-        -o-transition: top 0.6s ease-in-out;
-        transition: top 0.6s ease-in-out;
-        top: 100%;
-        height: 100%;
-    }
-
-    #videoPlayer.fullscreenVideo:hover .active {
-        top: 95% !important;
-    }
-
     .nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
         position: relative;
     }
@@ -48,20 +29,6 @@
     position: relative;
 }
 
-.fullscreenVideo #mediaElement {
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-}
-
-#mediaPlayer {
-    min-height: 50px;
-    padding-bottom: 20px;
-}
-
 .nowPlayingMediaInfo div {
     display: inline-block;
 }
@@ -72,17 +39,15 @@
 
 
 .nowPlayingMediaInfo {
-    position: relative;
     display: inline-block;
-    margin-top: 3px;
-    vertical-align: top;
 }
 
 .nowPlayingText {
     position: relative;
-    margin: 0 2em 0 5px;
+    top: -3px;
+    margin-left: 3px;
+    margin-right: 2em;
     font-weight: normal;
-    top: -7px;
 }
 
 @media all and (max-width: 650px) {
@@ -95,100 +60,6 @@
     height: 24px;
 }
 
-.itemVideo {
-    z-index: 99998;
-    background: #000;
-    min-width: 241px;
-    max-width: 320px;
-    max-height: 181px;
-    margin: 20px;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    margin-left: -160px;
-    margin-top: -90px;
-}
-
-.fullscreenVideo {
-    position: fixed;
-    top: 0 !important;
-    bottom: 0 !important;
-    right: 0 !important;
-    left: 0 !important;
-    width: 100%;
-    height: 100%;
-    border: 0;
-    z-index: 99996;
-    margin: 0 !important;
-}
-
-#videoBackdrop {
-    z-index: 99990;
-    position: fixed;
-    background-color: transparent;
-    background-color: rgba(0, 0, 0, 0.6);
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-}
-
-#videoPlayer {
-    z-index: 99997;
-    background: #1d1d1d;
-    position: fixed;
-    border: 1px solid #333;
-    top: 50%;
-    left: 50%;
-    margin-left: -170px;
-    margin-top: -115px;
-}
-
-#videoPlayer.fullscreenVideo,
-#videoPlayer.fullscreenVideo .itemVideo {
-    position: fixed !important;
-    top: 0 !important;
-    bottom: 0 !important;
-    right: 0 !important;
-    left: 0 !important;
-    width: 100% !important;
-    height: 100% !important;
-    border: 0 !important;
-    margin: 0 !important;
-    max-width: 100%;
-    max-height: 100%;
-}
-
-.fullscreenVideo .itemVideo {
-    z-index: 99996;
-}
-    
-    #videoPlayer .itemVideo {
-        position: static;
-        margin: 0;
-        margin: 20px 20px 60px;
-    }
-
-    #videoPlayer .nowPlayingBar {
-        z-index: 99999;
-        padding: 0;
-        height: 50px;
-        background-color: #1d1d1d;
-        position: absolute;
-        top: auto;
-        right: 0;
-        bottom: 0;
-        left: 0;
-    }
-
-    #videoPlayer .nowPlayingBar .barBackground {
-        border-width: 0;
-    }
-
-    #videoPlayer.fullscreenVideo .nowPlayingBar .barBackground {
-        border-width: 2px;
-    }
-
 .currentTime {
     display: inline-block;
     position: relative;
@@ -208,7 +79,6 @@
 
 .sliderContainer {
     display: inline-block;
-    margin-top: 10px;
 }
 
 .positionSliderContainer {
@@ -227,10 +97,6 @@
     margin-left: 15px !important;
 }
 
-.highPosition .ui-slider-track {
-    z-index: 100000;
-}
-
 .volumeSliderContainer .ui-slider-track {
     margin-left: 5px !important;
 }
@@ -262,40 +128,27 @@ input[type="range"]::-ms-fill-upper {
     display: none; /* display and visibility only */
 }
 
-@media all and (max-width: 1200px) {
-    .volumeSliderContainer, .sendMediaButton {
-        display: none!important;
-    }
-}
-
-@media all and (max-width: 960px) {
-    .volumeSliderContainer, .audioTracksButton, .chaptersButton, .sendMediaButton {
-        display: none!important;
-    }
-}
-
 @media all and (max-width: 800px) {
-    .volumeButton, .volumeSliderContainer, .muteButton, .unmuteButton, .nowPlayingMediaInfo, .sendMediaButton {
+    .volumeButton, .volumeSliderContainer, .muteButton, .unmuteButton, .nowPlayingMediaInfo {
         display: none!important;
     }
 }
 
-@media all and (max-width: 640px) {
-    .positionSliderContainer {
-        width: 80px;
-    }
-
-    .chaptersButton, .audioTracksButton, .qualityButton, .subtitleButton {
+@media all and (max-width: 600px) {
+    .chaptersButton, .audioTracksButton, .sendMediaButton {
         display: none!important;
     }
 
-    .positionSliderContainer {
+    .positionSliderContainer, .currentTime {
         top: 0!important;
         position: relative!important;
     }
 }
 
 @media all and (max-width: 500px) {
+    .positionSliderContainer {
+        width: 80px;
+    }
 
     .previousTrackButton, .nextTrackButton {
         display: none!important;
@@ -319,31 +172,13 @@ input[type="range"]::-ms-fill-upper {
     border: 1px solid #999;
     position: absolute;
     z-index: 99999;
-    bottom: 64px;
+    bottom: 78px;
     margin-left: -50px;
     max-height: 300px;
     overflow-y: auto;
     font-size: 13px;
 }
 
-.fullscreenVideo .mediaPlayerFlyout {
-    -webkit-transition: top 0.6s ease-in-out;
-    -moz-transition: top 0.6s ease-in-out;
-    -o-transition: top 0.6s ease-in-out;
-    transition: top 0.6s ease-in-out;
-    top: 100%;
-    bottom: 100%;
-}
-
-#videoPlayer.fullscreenVideo:hover .mediaPlayerFlyout {
-    -webkit-transition: top 0.6s ease-out;
-    -moz-transition: top 0.6s ease-out;
-    -o-transition: top 0.6s ease-out;
-    transition: top 0.6s ease-out;
-    top: -303px !important;
-    bottom: -3px !important;
-}
-
 .chaptersFlyout {
     width: 250px;
 }
@@ -412,166 +247,8 @@ input[type="range"]::-ms-fill-upper {
     padding-left: 5px;
 }
 
-@media (min-width: 640px) and (min-height: 360px) {
-    .itemVideo:not(.fullscreenVideo) {
-        min-width: 361px;
-        max-width: 480px;
-        max-height: 271px;
-        margin-left: -240px;
-        margin-top: -135px;
-    }
-
-    #videoPlayer {
-        margin-left: -250px;
-        margin-top: -160px;
-    }
-}
-
-@media (min-width: 800px) and (min-height: 450px) {
-    .itemVideo:not(.fullscreenVideo) {
-        min-width: 481px;
-        max-width: 640px;
-        max-height: 362px;
-        margin-left: -320px;
-        margin-top: -181px;
-    }
-
-    #videoPlayer {
-        margin-left: -330px;
-        margin-top: -205px;
-    }
-}
-
-@media (min-width: 960px) and (min-height: 540px) {
-    .itemVideo:not(.fullscreenVideo) {
-        min-width: 541px;
-        max-width: 720px;
-        max-height: 406px;
-        margin-left: -360px;
-        margin-top: -203px;
-    }
-
-    #videoPlayer {
-        margin-left: -370px;
-        margin-top: -228px;
-    }
-}
-
-@media (min-width: 1200px) and (min-height: 720px) {
-    .itemVideo:not(.fullscreenVideo) {
-        min-width: 812px;
-        max-width: 1080px;
-        max-height: 610px;
-        margin-left: -540px;
-        margin-top: -305px;
-    }
-
-    #videoPlayer {
-        margin-left: -550px;
-        margin-top: -329px;
-    }
-}
-
-@media (min-width: 1440px) and (min-height: 720px) {
-    .itemVideo:not(.fullscreenVideo) {
-        min-width: 812px;
-        max-width: 1080px;
-        max-height: 610px;
-        margin-left: -540px;
-        margin-top: -305px;
-    }
-
-    #videoPlayer {
-        margin-left: -550px;
-        margin-top: -329px;
-    }
-
+@media (min-width: 1440px) {
     .positionSliderContainer {
         width: 300px;
     }
-}
-
-.status {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-top: -75px;
-    margin-left: -75px;
-    width: 150px;
-    height: 150px;
-    z-index: 99999;
-}
-
-#play {
-    background-image: url(images/media/play.png);
-    opacity: 0;
-    display: none;
-}
-
-#pause {
-    background-image: url(images/media/pause.png);
-    opacity: 0;
-    display: none;
-}
-
-.fadeOut {
-    animation-name: fadeOut;
-    -webkit-animation-name: fadeOut;
-    animation-duration: .25s;
-    -webkit-animation-duration: .25s;
-    animation-timing-function: ease-in-out;
-    -webkit-animation-timing-function: ease-in-out;
-    visibility: visible !important;
-}
-
-@keyframes fadeOut {
-    0% {
-        transform: scale(.25);
-        opacity: 0.7;
-    }
-
-    60% {
-        transform: scale(.5);
-        opacity: 0.5;
-    }
-
-    80% {
-        transform: scale(.75);
-        opacity: 0.3;
-    }
-
-    100% {
-        transform: scale(1);
-        opacity: 0;
-    }
-}
-
-@-webkit-keyframes fadeOut {
-    0% {
-        -webkit-transform: scale(.25);
-        opacity: 0.7;
-    }
-
-    60% {
-        -webkit-transform: scale(.5);
-        opacity: 0.5;
-    }
-
-    80% {
-        -webkit-transform: scale(.75);
-        opacity: 0.3;
-    }
-
-    100% {
-        -webkit-transform: scale(1);
-        opacity: 0;
-    }
-}
-
-.cursor-active {
-    cursor: default;
-}
-
-.cursor-inactive {
-    cursor: none;
 }
\ No newline at end of file
diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js
index 0ded57d1c7..599d2aac92 100644
--- a/dashboard-ui/scripts/mediaplayer-video.js
+++ b/dashboard-ui/scripts/mediaplayer-video.js
@@ -18,12 +18,12 @@
         var timeout;
         var video;
         var culturesPromise;
+        var initialVolume;
         var fullscreenExited = false;
         var idleState = true;
 
         self.initVideoPlayer = function () {
             video = playVideo(item, startPosition, user);
-            enhancePlayer();
             return video;
         };
 
@@ -41,33 +41,10 @@
         };
 
         self.resetEnhancements = function () {
-
-            var footer = $("#footer");
-
-            var mediaPlayer = $("#mediaPlayer", footer);
-
-            var mediaElement = $("#mediaElement", mediaPlayer);
-
-            var nowPlayingBar = $("#nowPlayingBar", mediaPlayer);
-
-            footer.css("top", null);
-
-            mediaElement.html(""); // remove play/pause
-
-            mediaPlayer.hide().append(nowPlayingBar); // put elements back where they belong
-
-            $("#videoBackdrop", footer).hide();
-
-            if (!$("#footerNotifications", footer).html()) { // only hide footer if no notifications
-
-                footer.hide();
-
-            }
-
+            $("#mediaPlayer").hide();
+            $("video").remove();
             $("html").css("cursor", "default");
-
             $(".ui-loader").hide();
-
         };
 
         self.exitFullScreen = function() {
@@ -90,7 +67,7 @@
 
         self.showSubtitleMenu = function () {
 
-            var flyout = $('#subtitleFlyout');
+            var flyout = $('#video-subtitleFlyout');
 
             if (!flyout.is(':visible')) {
 
@@ -101,39 +78,39 @@
                 culturesPromise.done(function (cultures) {
                     $("html").css("cursor", "default");
                     flyout.html(getSubtitleTracksHtml(currentItem, cultures)).trigger('create').scrollTop(0);
-                    toggleFlyout(flyout, '#subtitleButton');
+                    toggleFlyout(flyout, '#video-subtitleButton');
                 });
 
             } else {
-                toggleFlyout(flyout, '#subtitleButton');
+                toggleFlyout(flyout, '#video-subtitleButton');
             }
         };
 
         self.showQualityFlyout = function () {
 
-            var flyout = $('#qualityFlyout');
+            var flyout = $('#video-qualityFlyout');
 
             if (!flyout.is(':visible')) {
                 flyout.html(getQualityFlyoutHtml(currentItem)).scrollTop(0);
             }
 
-            toggleFlyout(flyout, '#qualityButton');
+            toggleFlyout(flyout, '#video-qualityButton');
         };
 
         self.showChaptersFlyout = function () {
 
-            var flyout = $('#chaptersFlyout');
+            var flyout = $('#video-chaptersFlyout');
 
             if (!flyout.is(':visible')) {
                 flyout.html(getChaptersFlyoutHtml(currentItem)).scrollTop(0);
             }
 
-            toggleFlyout(flyout, '#chaptersButton');
+            toggleFlyout(flyout, '#video-chaptersButton');
         };
 
         self.showAudioTracksFlyout = function () {
 
-            var flyout = $('#audioTracksFlyout');
+            var flyout = $('#video-audioTracksFlyout');
 
             if (!flyout.is(':visible')) {
 
@@ -144,15 +121,15 @@
                 culturesPromise.done(function (cultures) {
                     $("html").css("cursor", "default");
                     flyout.html(getAudioTracksHtml(currentItem, cultures)).trigger('create').scrollTop(0);
-                    toggleFlyout(flyout, '#audioTracksButton');
+                    toggleFlyout(flyout, '#video-audioTracksButton');
                 });
             } else {
-                toggleFlyout(flyout, '#audioTracksButton');
+                toggleFlyout(flyout, '#video-audioTracksButton');
             }
         };
 
         $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function () {
-            var nowPlayingBar = $('#nowPlayingBar');
+            var videoControls = $('#videoControls');
 
             $('.itemVideo').off('mousemove keydown scroll', idleHandler);
 
@@ -161,22 +138,22 @@
                 idleState = true;
                 $('.itemVideo').on('mousemove keydown scroll', idleHandler).trigger('mousemove');
             } else {
-                nowPlayingBar.removeClass("highPosition");
+                videoControls.removeClass("active inactive");
                 exitFullScreenToWindow();
             }
         });
 
         $(function () {
-            $('#chaptersFlyout').on('click', '.mediaFlyoutOption', function () {
+            $('#video-chaptersFlyout').on('click', '.mediaFlyoutOption', function () {
 
                 var ticks = parseInt(this.getAttribute('data-positionticks'));
 
                 self.changeStream(ticks);
 
-                hideFlyout($('#chaptersFlyout'));
+                hideFlyout($('#video-chaptersFlyout'));
             });
 
-            $('#audioTracksFlyout').on('click', '.mediaFlyoutOption', function () {
+            $('#video-audioTracksFlyout').on('click', '.mediaFlyoutOption', function () {
 
                 if (!$(this).hasClass('selectedMediaFlyoutOption')) {
                     var index = parseInt(this.getAttribute('data-index'));
@@ -184,10 +161,10 @@
                     self.changeStream(self.getCurrentTicks(), { AudioStreamIndex: index });
                 }
 
-                hideFlyout($('#audioTracksFlyout'));
+                hideFlyout($('#video-audioTracksFlyout'));
             });
 
-            $('#subtitleFlyout').on('click', '.mediaFlyoutOption', function () {
+            $('#video-subtitleFlyout').on('click', '.mediaFlyoutOption', function () {
 
                 if (!$(this).hasClass('selectedMediaFlyoutOption')) {
                     var index = parseInt(this.getAttribute('data-index'));
@@ -195,10 +172,10 @@
                     self.changeStream(self.getCurrentTicks(), { SubtitleStreamIndex: index });
                 }
 
-                hideFlyout($('#subtitleFlyout'));
+                hideFlyout($('#video-subtitleFlyout'));
             });
 
-            $('#qualityFlyout').on('click', '.mediaFlyoutOption', function () {
+            $('#video-qualityFlyout').on('click', '.mediaFlyoutOption', function () {
 
                 if (!$(this).hasClass('selectedMediaFlyoutOption')) {
 
@@ -214,10 +191,10 @@
                     });
                 }
 
-                hideFlyout($('#qualityFlyout'));
+                hideFlyout($('#video-qualityFlyout'));
             });
 
-            $("#footer").on("mousemove", "#videoPlayer.fullscreenVideo #itemVideo", function () {
+            $("body").on("mousemove", "#videoPlayer.fullscreenVideo #itemVideo", function () {
 
                 idleHandler(this);
 
@@ -226,7 +203,7 @@
 
         function idleHandler() {
             var video = $(".itemVideo");
-            var nowPlayingBar = $("#nowPlayingBar");
+            var videoControls = $("#videoControls");
 
             if (timeout) {
                 window.clearTimeout(timeout);
@@ -234,7 +211,7 @@
 
             if (idleState == true) {
                 video.removeClass("cursor-inactive").addClass("cursor-active");
-                nowPlayingBar.removeClass("inactive").addClass("active");
+                videoControls.removeClass("inactive").addClass("active");
             }
 
             idleState = false;
@@ -242,9 +219,9 @@
             timeout = window.setTimeout(function () {
                 idleState = true;
                 video.removeClass("cursor-active").addClass("cursor-inactive");
-                nowPlayingBar.removeClass("active").addClass("inactive");
+                videoControls.removeClass("active").addClass("inactive");
             }, 4000);
-        }
+        };
 
         function requestFullScreen(element) {
             // Supports most browsers and their versions.
@@ -255,118 +232,6 @@
             } else {
                 enterFullScreen();
             }
-        }
-
-        function enhancePlayer() {
-            // Show loading animation
-            $(".ui-loader").show();
-            $("html").css("cursor", "wait");
-
-            var footer = $("#footer");
-            var nowPlayingBar = $("#nowPlayingBar", footer);
-            var mediaElement = $("#mediaElement", footer);
-
-            var play = $("<div id='play' class='status'></div>");
-            var pause = $("<div id='pause' class='status'></div>");
-
-            mediaElement.append(play).append(pause);
-
-            $("#videoBackdrop", footer).show();
-
-            footer.css("top", "101%");
-
-            var videoPlayer = $("#videoPlayer", footer)
-                .append(nowPlayingBar);
-
-            // Stop playback on browser back button nav
-            $(window).on("popstate", function () {
-
-                self.stop();
-
-                return;
-
-            });
-
-            $(video)
-                .on("click", function (e) {
-
-                    if (this.paused) {
-
-                        self.unpause();
-
-                    } else {
-
-                        self.pause();
-
-                    }
-
-                })
-                .on("dblclick", function () {
-
-                    self.toggleFullscreen();
-
-                })
-                .on("seeking", function (e) {
-
-                    $("html").css("cursor", "wait");
-
-                })
-                .on("seeked", function (e) {
-
-                    $("html").css("cursor", "default");
-
-                })
-                .on("loadstart", function () {
-
-                    $("html").css("cursor", "progress");
-
-                })
-                .on("canplay", function () {
-
-                    $(".ui-loader").hide();
-
-                    $("html").css("cursor", "default");
-
-                });
-
-            $(".mediaFlyoutContainer").on("click", "a", function (e) {
-
-                if (confirm("This option will close the video player. Proceed?")) {
-
-                    self.stop();
-
-                } else {
-
-                    e.preventDefault();
-
-                }
-
-            });
-
-            changeHandler("fullscreenchange");
-            changeHandler("mozfullscreenchange");
-            changeHandler("webkitfullscreenchange");
-            changeHandler("msfullscreenchange");
-
-            $(document).on("keyup.enhancePlayer", function (e) {
-                if (fullscreenExited) {
-
-                    videoPlayer.removeClass("fullscreenVideo");
-
-                    fullscreenExited = false;
-
-                    return;
-                }
-
-                if (e.keyCode == 27) {
-
-                    self.stop();
-
-                    $(this).unbind("keyup.enhancePlayer");
-                }
-            });
-
-            fullscreenExited = false;
         };
 
         function changeHandler(event) {
@@ -375,7 +240,7 @@
                 fullscreenExited = self.isFullScreen() == false;
             });
 
-        }
+        };
 
         function enterFullScreen() {
 
@@ -391,7 +256,7 @@
 
             player.removeClass("fullscreenVideo");
 
-        }
+        };
 
         function toggleFlyout(flyout, button) {
 
@@ -421,14 +286,14 @@
 
                 hideFlyout(flyout);
             }
-        }
+        };
 
         function hideFlyout(flyout) {
 
             flyout.slideUp().empty();
 
             $(document.body).off("mousedown.hidesearchhints");
-        }
+        };
 
         function getChaptersFlyoutHtml(item) {
 
@@ -487,7 +352,7 @@
             }
 
             return html;
-        }
+        };
 
         function getAudioTracksHtml(item, cultures) {
 
@@ -570,7 +435,7 @@
             html += '<div style="padding: 5px;"><a data-role="button" data-icon="gear" href="usersettings.html?userid=' + Dashboard.getCurrentUserId() + '" data-mini="true" data-theme="a">Preferences</a></div>';
 
             return html;
-        }
+        };
 
         function getSubtitleTracksHtml(item, cultures) {
 
@@ -657,7 +522,7 @@
             html += '<div style="padding: 5px;"><a data-role="button" data-icon="gear" href="usersettings.html?userid=' + Dashboard.getCurrentUserId() + '" data-mini="true" data-theme="a">Preferences</a></div>';
 
             return html;
-        }
+        };
 
         function getQualityFlyoutHtml(item) {
 
@@ -698,7 +563,7 @@
             }
 
             return html;
-        }
+        };
 
         function getInitialSubtitleStreamIndex(mediaStreams, user) {
 
@@ -737,7 +602,7 @@
             }
 
             return null;
-        }
+        };
 
         function getInitialAudioStreamIndex(mediaStreams, user) {
 
@@ -760,7 +625,7 @@
 
             // Just use the first audio stream
             return audioStreams.length ? audioStreams[0].Index : null;
-        }
+        };
 
         function getVideoQualityOptions(item) {
 
@@ -836,7 +701,7 @@
             options[selectedIndex].selected = true;
 
             return options;
-        }
+        };
 
         function playVideo(item, startPosition, user) {
 
@@ -909,6 +774,13 @@
 
             })) + seekParam;
 
+            //======================================================================================>
+
+            // Show loading animation
+            $(".ui-loader").show();
+            $("html").css("cursor", "wait");
+
+            // Create video player
             var html = '';
 
             var requiresControls = $.browser.msie || $.browser.android || ($.browser.webkit && !$.browser.chrome);
@@ -937,52 +809,54 @@
                 html += '<source type="video/webm" src="' + webmVideoUrl + '" />';
             }
 
-            html += '</video';
+            html += '</video>';
+
+            var mediaPlayer = $("#mediaPlayer").show();
+            var videoPlayer = $("#videoPlayer", mediaPlayer);
+            var videoControls = $('#videoControls', mediaPlayer);
 
-            var footer = $("#footer").show();
-            var nowPlayingBar = $('#nowPlayingBar');
             //show stop button
-            $('#stopButton', nowPlayingBar).show();
-            $('#playButton', nowPlayingBar).hide();
-            $('#pauseButton', nowPlayingBar).show();
-            $('#playlistButton', nowPlayingBar).hide();
-            $('#previousTrackButton', nowPlayingBar).hide();
-            $('#nextTrackButton', nowPlayingBar).hide();
-            var mediaElement = $('#mediaElement', footer).html(html);
+            $('#video-stopButton', videoControls).show();
+            $('#video-playButton', videoControls).hide();
+            $('#video-pauseButton', videoControls).show();
+            $('#video-playlistButton', videoControls).hide();
+            $('#video-previousTrackButton', videoControls).hide();
+            $('#video-nextTrackButton', videoControls).hide();
+            var videoElement = $('#videoElement', mediaPlayer).prepend(html);
 
-            $('#qualityButton', nowPlayingBar).show();
+            $('#video-qualityButton', videoControls).show();
 
             if (mediaStreams.filter(function (i) {
                 return i.Type == "Audio";
             }).length) {
-                $('#audioTracksButton', nowPlayingBar).show();
+                $('#video-audioTracksButton', videoControls).show();
             } else {
-                $('#audioTracksButton', nowPlayingBar).hide();
+                $('#video-audioTracksButton', videoControls).hide();
             }
 
             if (mediaStreams.filter(function (i) {
                 return i.Type == "Subtitle";
             }).length) {
-                $('#subtitleButton', nowPlayingBar).show();
+                $('#video-subtitleButton', videoControls).show();
             } else {
-                $('#subtitleButton', nowPlayingBar).hide();
+                $('#video-subtitleButton', videoControls).hide();
             }
 
             if (item.Chapters && item.Chapters.length) {
-                $('#chaptersButton', nowPlayingBar).show();
+                $('#video-chaptersButton', videoControls).show();
             } else {
-                $('#chaptersButton', nowPlayingBar).hide();
+                $('#video-chaptersButton', videoControls).hide();
             }
 
             if (requiresControls) {
-                $('#fullscreenButton', nowPlayingBar).hide();
+                $('#video-fullscreenButton', videoControls).hide();
             } else {
-                $('#fullscreenButton', nowPlayingBar).show();
+                $('#video-fullscreenButton', videoControls).show();
             }
 
-            var videoElement = $("video", mediaElement);
+            var videoElement = $("video", videoElement);
 
-            var initialVolume = localStorage.getItem("volume") || 0.5;
+            initialVolume = localStorage.getItem("volume") || 0.5;
 
             videoElement.each(function () {
                 this.volume = initialVolume;
@@ -1021,20 +895,20 @@
 
             }).on("pause", function (e) {
 
-                $('#playButton', nowPlayingBar).show();
-                $('#pauseButton', nowPlayingBar).hide();
-                $("#pause", mediaElement).show().addClass("fadeOut");
+                $('#video-playButton', videoControls).show();
+                $('#video-pauseButton', videoControls).hide();
+                $("#pause", videoElement).show().addClass("fadeOut");
                 setTimeout(function () {
-                    $("#pause", mediaElement).hide().removeClass("fadeOut");
+                    $("#pause", videoElement).hide().removeClass("fadeOut");
                 }, 300);
 
             }).on("playing", function (e) {
 
-                $('#playButton', nowPlayingBar).hide();
-                $('#pauseButton', nowPlayingBar).show();
-                $("#play", mediaElement).show().addClass("fadeOut");
+                $('#video-playButton', videoControls).hide();
+                $('#video-pauseButton', videoControls).show();
+                $("#play", videoElement).show().addClass("fadeOut");
                 setTimeout(function () {
-                    $("#play", mediaElement).hide().removeClass("fadeOut");
+                    $("#play", videoElement).hide().removeClass("fadeOut");
                 }, 300);
 
             }).on("timeupdate", function () {
@@ -1044,14 +918,14 @@
                     self.setCurrentTime(self.getCurrentTicks(this), item, true);
                 }
 
-            }).on("error", function (e) {
+            }).on("error", function () {
 
                 $("html").css("cursor", "default");
                 $(".ui-loader").hide();
                 self.resetEnhancements();
 
                 var errorCode = this.error ? this.error.code : '';
-                console.log('Html5 Video error code: ' + errorCode, JSON.stringify(e));
+                console.log('Html5 Video error code: ' + errorCode);
 
                 var errorMsg = 'There was an error playing the video.';
 
@@ -1064,9 +938,74 @@
                     message: errorMsg
                 });
 
+            }).on("click", function (e) {
+
+                if (this.paused) {
+                    self.unpause();
+                } else {
+                    self.pause();
+                }
+
+            }).on("dblclick", function () {
+
+                self.toggleFullscreen();
+
+            }).on("seeking", function (e) {
+
+                $("html").css("cursor", "wait");
+
+            }).on("seeked", function (e) {
+
+                $("html").css("cursor", "default");
+
+            }).on("loadstart", function () {
+
+                $("html").css("cursor", "progress");
+
+            }).on("canplay", function () {
+
+                $(".ui-loader").hide();
+                $("html").css("cursor", "default");
+
             }).on("ended.playbackstopped", self.onPlaybackStopped)
                 .on('ended.playnext', self.playNextAfterEnded);
 
+            // Stop playback on browser back button nav
+            $(window).on("popstate", function () {
+                self.stop();
+                return;
+            });
+
+            $(".mediaFlyoutContainer").on("click", "a", function (e) {
+                if (confirm("This option will close the video player. Proceed?")) {
+                    self.stop();
+                } else {
+                    e.preventDefault();
+                }
+            });
+
+            changeHandler("fullscreenchange");
+            changeHandler("mozfullscreenchange");
+            changeHandler("webkitfullscreenchange");
+            changeHandler("msfullscreenchange");
+
+            $(document).on("keyup.enhancePlayer", function (e) {
+                if (fullscreenExited) {
+                    videoPlayer.removeClass("fullscreenVideo");
+                    fullscreenExited = false;
+                    return;
+                }
+
+                if (e.keyCode == 27) {
+                    self.stop();
+                    $(this).unbind("keyup.enhancePlayer");
+                }
+            });
+
+            mediaPlayer.trigger("create");
+
+            fullscreenExited = false;
+
             currentItem = item;
 
             return videoElement[0];
diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js
index a4f041b1e0..a4646c48e8 100644
--- a/dashboard-ui/scripts/mediaplayer.js
+++ b/dashboard-ui/scripts/mediaplayer.js
@@ -7,15 +7,15 @@
         var testableVideoElement = document.createElement('video');
         var currentMediaElement;
         var currentProgressInterval;
-        var positionSlider;
-        var currentTimeElement;
         var currentItem;
-        var muteButton;
-        var unmuteButton;
         var curentDurationTicks;
         var canClientSeek;
         var currentPlaylistIndex = 0;
 
+        self.currentTimeElement;
+        self.unmuteButton;
+        self.muteButton;
+        self.positionSlider;
         self.isPositionSliderActive;
         self.volumeSlider;
         self.startTimeTicksOffset;
@@ -24,52 +24,28 @@
         self.updateCanClientSeek = function (elem) {
             var duration = elem.duration;
             canClientSeek = duration && !isNaN(duration) && duration != Number.POSITIVE_INFINITY && duration != Number.NEGATIVE_INFINITY;
-        }
-
-        $(window).on("beforeunload popstate", function () {
-
-            var item = currentItem;
-            var media = currentMediaElement;
-
-            // Try to report playback stopped before the browser closes
-            if (item && media && currentProgressInterval) {
-
-                var endTime = currentMediaElement.currentTime;
-
-                var position = Math.floor(10000000 * endTime) + self.startTimeTicksOffset;
-
-                ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position);
-            }
-        });
-
-        function replaceQueryString(url, param, value) {
-            var re = new RegExp("([?|&])" + param + "=.*?(&|$)", "i");
-            if (url.match(re))
-                return url.replace(re, '$1' + param + "=" + value + '$2');
-            else
-                return url + '&' + param + "=" + value;
-        }
+        };
 
         self.updateVolumeButtons = function (vol) {
 
             if (vol) {
-                muteButton.show();
-                unmuteButton.hide();
+                self.muteButton.show();
+                self.unmuteButton.hide();
             } else {
-                muteButton.hide();
-                unmuteButton.show();
+                self.muteButton.hide();
+                self.unmuteButton.show();
             }
-        }
+        };
 
         self.getCurrentTicks = function (mediaElement) {
             return Math.floor(10000000 * (mediaElement || currentMediaElement).currentTime) + self.startTimeTicksOffset;
-        }
+        };
 
         self.onPlaybackStopped = function () {
 
             $(this).off('ended.playbackstopped');
 
-            currentTimeElement.empty();
+            self.currentTimeElement.empty();
 
             var endTime = this.currentTime;
 
@@ -79,8 +55,6 @@
 
             ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position);
 
-            $("#mediaPlayer").hide();
-
             if (currentItem.MediaType == "Video") {
                 ApiClient.stopActiveEncodings();
                 if (self.isFullScreen()) {
@@ -88,14 +62,14 @@
                 }
                 self.resetEnhancements();
             }
-        }
+        };
 
         self.playNextAfterEnded = function () {
 
             $(this).off('ended.playnext');
 
             self.nextTrack();
-        }
+        };
 
         self.startProgressInterval = function (itemId) {
 
@@ -110,25 +84,7 @@
                 }
 
             }, intervalTime);
-        }
-
-        function sendProgressUpdate(itemId) {
-
-            ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), itemId, self.getCurrentTicks(), currentMediaElement.paused, currentMediaElement.volume == 0);
-        }
-
-        function clearProgressInterval() {
-
-            if (currentProgressInterval) {
-                clearTimeout(currentProgressInterval);
-                currentProgressInterval = null;
-            }
-        }
-
-        function canPlayWebm() {
-
-            return testableVideoElement.canPlayType('video/webm').replace(/no/, '');
-        }
+        };
 
         self.getTranscodingExtension = function () {
 
@@ -146,7 +102,7 @@
             }
 
             return '.mp4';
-        }
+        };
 
         self.changeStream = function (ticks, params) {
 
@@ -211,49 +167,7 @@
 
                 });
             }
-        }
-
-        function onPositionSliderChange() {
-
-            self.isPositionSliderActive = false;
-
-            var newPercent = parseInt(this.value);
-
-            var newPositionTicks = (newPercent / 100) * currentItem.RunTimeTicks;
-
-            self.changeStream(Math.floor(newPositionTicks));
-        }
-
-        $(function () {
-
-            muteButton = $('#muteButton');
-            unmuteButton = $('#unmuteButton');
-
-            currentTimeElement = $('.currentTime');
-
-            self.volumeSlider = $('.volumeSlider').on('slidestop', function () {
-
-                var vol = this.value;
-
-                self.updateVolumeButtons(vol);
-                currentMediaElement.volume = vol;
-            });
-
-            positionSlider = $(".positionSlider").on('slidestart', function () {
-
-                self.isPositionSliderActive = true;
-
-            }).on('slidestop', onPositionSliderChange);
-        });
-
-        function endsWith(text, pattern) {
-
-            text = text.toLowerCase();
-            pattern = pattern.toLowerCase();
-
-            var d = text.length - pattern.length;
-            return d >= 0 && text.lastIndexOf(pattern) === d;
-        }
+        };
 
         self.setCurrentTime = function (ticks, item, updateSlider) {
 
@@ -270,155 +184,14 @@
                     var percent = ticks / curentDurationTicks;
                     percent *= 100;
 
-                    positionSlider.val(percent).slider('enable').slider('refresh');
+                    self.positionSlider.val(percent).slider('enable').slider('refresh');
                 }
             } else {
-                positionSlider.slider('disable').slider('refresh');
+                self.positionSlider.slider('disable').slider('refresh');
             }
 
-            currentTimeElement.html(timeText);
-        }
-
-        function playAudio(item, startPositionTicks) {
-
-            startPositionTicks = startPositionTicks || 0;
-
-            var baseParams = {
-                audioChannels: 2,
-                audioBitrate: 128000,
-                StartTimeTicks: startPositionTicks
-            };
-
-            var mp3Url = ApiClient.getUrl('Audio/' + item.Id + '/stream.mp3', $.extend({}, baseParams, {
-                audioCodec: 'mp3'
-            }));
-
-            var aacUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.aac', $.extend({}, baseParams, {
-                audioCodec: 'aac'
-            }));
-
-            var webmUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.webm', $.extend({}, baseParams, {
-                audioCodec: 'Vorbis'
-            }));
-
-            var mediaStreams = item.MediaStreams || [];
-
-            var isStatic = false;
-            var seekParam = isStatic && startPositionTicks ? '#t=' + (startPositionTicks / 10000000) : '';
-
-            for (var i = 0, length = mediaStreams.length; i < length; i++) {
-
-                var stream = mediaStreams[i];
-
-                if (stream.Type == "Audio") {
-
-                    // Stream statically when possible
-                    if (endsWith(item.Path, ".aac") && stream.BitRate <= 256000) {
-                        aacUrl += "&static=true" + seekParam;
-                        isStatic = true;
-                    }
-                    else if (endsWith(item.Path, ".mp3") && stream.BitRate <= 256000) {
-                        mp3Url += "&static=true" + seekParam;
-                        isStatic = true;
-                    }
-                    break;
-                }
-            }
-
-            self.startTimeTicksOffset = isStatic ? 0 : startPositionTicks;
-
-            var html = '';
-
-            var requiresControls = $.browser.android || ($.browser.webkit && !$.browser.chrome);
-
-            // Can't autoplay in these browsers so we need to use the full controls
-            if (requiresControls) {
-                html += '<audio preload="auto" autoplay controls>';
-            } else {
-                html += '<audio preload="auto" style="display:none;" autoplay>';
-            }
-            html += '<source type="audio/mpeg" src="' + mp3Url + '" />';
-            html += '<source type="audio/aac" src="' + aacUrl + '" />';
-            html += '<source type="audio/webm" src="' + webmUrl + '" />';
-            html += '</audio';
-
-            var footer = $("#footer").show();
-            var nowPlayingBar = $('#nowPlayingBar');
-            //show stop button
-            $('#stopButton', nowPlayingBar).show();
-            $('#playButton', nowPlayingBar).hide();
-            $('#pauseButton', nowPlayingBar).show();
-            $('#fullscreenButton', nowPlayingBar).hide();
-
-            $('#previousTrackButton', nowPlayingBar).show();
-            $('#nextTrackButton', nowPlayingBar).show();
-            $('#playlistButton', nowPlayingBar).show();
-
-            $('#qualityButton', nowPlayingBar).hide();
-            $('#audioTracksButton', nowPlayingBar).hide();
-            $('#subtitleButton', nowPlayingBar).hide();
-            $('#chaptersButton', nowPlayingBar).hide();
-
-            $("#mediaPlayer", nowPlayingBar).show();
-
-            var mediaElement = $('#mediaElement', footer).html(html);
-            var audioElement = $("audio", mediaElement);
-
-            var initialVolume = localStorage.getItem("volume") || 0.5;
-
-            audioElement.each(function () {
-                this.volume = initialVolume;
-            });
-
-            self.volumeSlider.val(initialVolume).slider('refresh');
-            self.updateVolumeButtons(initialVolume);
-
-            audioElement.on("volumechange", function () {
-
-                var vol = this.volume;
-
-                localStorage.setItem("volume", vol);
-
-                self.updateVolumeButtons(vol);
-
-            }).on("play.once", function () {
-
-                if (!requiresControls) {
-                    audioElement.hide();
-                }
-
-                self.updateCanClientSeek(this);
-
-                audioElement.off("play.once");
-
-                ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), item.Id, true, item.MediaType);
-
-                self.startProgressInterval(item.Id);
-
-            }).on("pause", function () {
-
-                $('#playButton', nowPlayingBar).show();
-                $('#pauseButton', nowPlayingBar).hide();
-
-            }).on("playing", function () {
-
-                $('#playButton', nowPlayingBar).hide();
-                $('#pauseButton', nowPlayingBar).show();
-
-            }).on("timeupdate", function () {
-
-                if (!self.isPositionSliderActive) {
-
-                    self.setCurrentTime(self.getCurrentTicks(this), item, true);
-                }
-
-            }).on("ended.playbackstopped", self.onPlaybackStopped).on('ended.playnext', self.playNextAfterEnded);
-
-            currentItem = item;
-            curentDurationTicks = item.RunTimeTicks;
-
-            return audioElement[0];
-        }
+            self.currentTimeElement.html(timeText);
+        };
 
         self.canPlayVideoDirect = function (item, videoStream, audioStream, subtitleStream, maxWidth, bitrate) {
 
@@ -462,30 +235,7 @@
             }
 
             return extension.toLowerCase() == 'mp4';
-        }
-
-        function canPlayAudioStreamDirect(audioStream) {
-
-            var audioCodec = (audioStream.Codec || '').toLowerCase().replace('-', '');
-
-            if (audioCodec.indexOf('aac') == -1 &&
-                audioCodec.indexOf('mp3') == -1 &&
-                audioCodec.indexOf('mpeg') == -1) {
-
-                return false;
-            }
-
-            if (audioStream.Channels == null) {
-                return false;
-            }
-
-            // IE won't play at all if more than two channels
-            if (audioStream.Channels > 2 && $.browser.msie) {
-                return false;
-            }
-
-            return true;
-        }
+        };
 
         self.getFinalVideoParams = function (item, maxWidth, bitrate, audioStreamIndex, subtitleStreamIndex, transcodingExtension) {
 
@@ -660,7 +410,7 @@
 
             var mediaElement;
 
-            $("#mediaPlayer").show();
+            var mediaControls = $('#nowPlayingBar');
 
             if (item.MediaType === "Video") {
 
@@ -668,10 +418,13 @@
                 mediaElement = self.initVideoPlayer();
                 currentItem = item;
                 curentDurationTicks = item.RunTimeTicks;
+                mediaControls = $("#videoControls");
 
             } else if (item.MediaType === "Audio") {
 
                 mediaElement = playAudio(item, startPosition);
+                mediaControls.show();
+
             } else {
                 throw new Error("Unrecognized media type");
             }
@@ -751,32 +504,9 @@
                 "' title='" + htmlTitle + "' src='" + url + "' style='height:40px;display:inline-block;' /></a></div>";
             html += "<div class='nowPlayingText' title='" + htmlTitle + "'>" + titleHtml(nowPlayingText) + "</div>";
 
-            var nowPlayingBar = $('#nowPlayingBar');
-            $('.nowPlayingMediaInfo', nowPlayingBar).html(html);
+            $('.nowPlayingMediaInfo', mediaControls).html(html);
         };
 
-        function trunc(string, len) {
-            if (string.length > 0 && string.length < len) return string;
-            var trimmed = $.trim(string).substring(0, len).split(" ").slice(0, -1).join(" ");
-            if (trimmed) {
-                trimmed += "...";
-            } else {
-                trimmed = "---"
-            }
-            return trimmed;
-        }
-
-        function trimTitle(title) {
-            return title.replace("\n---", "");
-        }
-
-        function titleHtml(title) {
-            var titles = title.split("\n");
-            return (trunc(titles[0], 30) + "<br />" + trunc(titles[1], 30)).replace("---", "&nbsp;");
-        }
-
-        var getItemFields = "MediaStreams,Chapters,Path";
-
         self.getItemsForPlayback = function (query) {
 
             var userId = Dashboard.getCurrentUserId();
@@ -1133,16 +863,13 @@
 
             }).trigger("ended");
 
-            $("#mediaPlayer").hide();
-
             if (currentItem.MediaType == "Video") {
                 if (self.isFullScreen()) {
                     self.exitFullScreen();
                 }
                 self.resetEnhancements();
             } else {
-                var footer = $("#footer");
-                footer.hide();
+                $('#nowPlayingBar').hide();
             }
         };
 
@@ -1157,6 +884,286 @@
             });
 
         };
+
+        self.bindPositionSlider = function () {
+            self.positionSlider.on('slidestart', function (e) {
+
+                self.isPositionSliderActive = true;
+
+            }).on('slidestop', onPositionSliderChange);
+        };
+
+        self.bindVolumeSlider = function () {
+            self.volumeSlider.on('slidestop', function () {
+
+                console.log("slideStop");
+
+                var vol = this.value;
+
+                self.updateVolumeButtons(vol);
+                currentMediaElement.volume = vol;
+            });
+        };
+
+        $(window).on("beforeunload popstate", function () {
+
+            var item = currentItem;
+            var media = currentMediaElement;
+
+            // Try to report playback stopped before the browser closes
+            if (item && media && currentProgressInterval) {
+
+                var endTime = currentMediaElement.currentTime;
+
+                var position = Math.floor(10000000 * endTime) + self.startTimeTicksOffset;
+
+                ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position);
+            }
+        });
+
+        $(function () {
+            initPlayer();
+        });
+
+        function initPlayer() {
+            self.muteButton = $('.muteButton');
+            self.unmuteButton = $('.unmuteButton');
+            self.currentTimeElement = $('.currentTime');
+            self.volumeSlider = $('.volumeSlider');
+            self.positionSlider = $(".positionSlider");
+
+            self.bindVolumeSlider();
+            self.bindPositionSlider();
+        };
+
+        function replaceQueryString(url, param, value) {
+            var re = new RegExp("([?|&])" + param + "=.*?(&|$)", "i");
+            if (url.match(re))
+                return url.replace(re, '$1' + param + "=" + value + '$2');
+            else
+                return url + '&' + param + "=" + value;
+        };
+
+        function sendProgressUpdate(itemId) {
+
+            ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), itemId, self.getCurrentTicks(), currentMediaElement.paused, currentMediaElement.volume == 0);
+        };
+
+        function clearProgressInterval() {
+
+            if (currentProgressInterval) {
+                clearTimeout(currentProgressInterval);
+                currentProgressInterval = null;
+            }
+        };
+
+        function canPlayWebm() {
+
+            return testableVideoElement.canPlayType('video/webm').replace(/no/, '');
+        };
+
+        function onPositionSliderChange() {
+
+            self.isPositionSliderActive = false;
+
+            var newPercent = parseInt(this.value);
+
+            var newPositionTicks = (newPercent / 100) * currentItem.RunTimeTicks;
+
+            self.changeStream(Math.floor(newPositionTicks));
+        };
+
+        function endsWith(text, pattern) {
+
+            text = text.toLowerCase();
+            pattern = pattern.toLowerCase();
+
+            var d = text.length - pattern.length;
+            return d >= 0 && text.lastIndexOf(pattern) === d;
+        };
+
+        function playAudio(item, startPositionTicks) {
+
+            startPositionTicks = startPositionTicks || 0;
+
+            var baseParams = {
+                audioChannels: 2,
+                audioBitrate: 128000,
+                StartTimeTicks: startPositionTicks
+            };
+
+            var mp3Url = ApiClient.getUrl('Audio/' + item.Id + '/stream.mp3', $.extend({}, baseParams, {
+                audioCodec: 'mp3'
+            }));
+
+            var aacUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.aac', $.extend({}, baseParams, {
+                audioCodec: 'aac'
+            }));
+
+            var webmUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.webm', $.extend({}, baseParams, {
+                audioCodec: 'Vorbis'
+            }));
+
+            var mediaStreams = item.MediaStreams || [];
+
+            var isStatic = false;
+            var seekParam = isStatic && startPositionTicks ? '#t=' + (startPositionTicks / 10000000) : '';
+
+            for (var i = 0, length = mediaStreams.length; i < length; i++) {
+
+                var stream = mediaStreams[i];
+
+                if (stream.Type == "Audio") {
+
+                    // Stream statically when possible
+                    if (endsWith(item.Path, ".aac") && stream.BitRate <= 256000) {
+                        aacUrl += "&static=true" + seekParam;
+                        isStatic = true;
+                    }
+                    else if (endsWith(item.Path, ".mp3") && stream.BitRate <= 256000) {
+                        mp3Url += "&static=true" + seekParam;
+                        isStatic = true;
+                    }
+                    break;
+                }
+            }
+
+            self.startTimeTicksOffset = isStatic ? 0 : startPositionTicks;
+
+            var html = '';
+
+            var requiresControls = $.browser.android || ($.browser.webkit && !$.browser.chrome);
+
+            // Can't autoplay in these browsers so we need to use the full controls
+            if (requiresControls) {
+                html += '<audio preload="auto" autoplay controls>';
+            } else {
+                html += '<audio preload="auto" style="display:none;" autoplay>';
+            }
+            html += '<source type="audio/mpeg" src="' + mp3Url + '" />';
+            html += '<source type="audio/aac" src="' + aacUrl + '" />';
+            html += '<source type="audio/webm" src="' + webmUrl + '" />';
+            html += '</audio>';
+
+            var nowPlayingBar = $('#nowPlayingBar').show();
+            //show stop button
+            $('#stopButton', nowPlayingBar).show();
+            $('#playButton', nowPlayingBar).hide();
+            $('#pauseButton', nowPlayingBar).show();
+            $('#fullscreenButton', nowPlayingBar).hide();
+
+            $('#previousTrackButton', nowPlayingBar).show();
+            $('#nextTrackButton', nowPlayingBar).show();
+            $('#playlistButton', nowPlayingBar).show();
+
+            $('#qualityButton', nowPlayingBar).hide();
+            $('#audioTracksButton', nowPlayingBar).hide();
+            $('#subtitleButton', nowPlayingBar).hide();
+            $('#chaptersButton', nowPlayingBar).hide();
+
+            $('#mediaElement', nowPlayingBar).html(html);
+            var audioElement = $("audio", mediaElement);
+
+            var initialVolume = localStorage.getItem("volume") || 0.5;
+
+            audioElement.each(function () {
+                this.volume = initialVolume;
+            });
+
+            self.volumeSlider.val(initialVolume).slider('refresh');
+            self.updateVolumeButtons(initialVolume);
+
+            audioElement.on("volumechange", function () {
+
+                var vol = this.volume;
+
+                localStorage.setItem("volume", vol);
+
+                self.updateVolumeButtons(vol);
+
+            }).on("play.once", function () {
+
+                if (!requiresControls) {
+                    audioElement.hide();
+                }
+
+                self.updateCanClientSeek(this);
+
+                audioElement.off("play.once");
+
+                ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), item.Id, true, item.MediaType);
+
+                self.startProgressInterval(item.Id);
+
+            }).on("pause", function () {
+
+                $('#playButton', nowPlayingBar).show();
+                $('#pauseButton', nowPlayingBar).hide();
+
+            }).on("playing", function () {
+
+                $('#playButton', nowPlayingBar).hide();
+                $('#pauseButton', nowPlayingBar).show();
+
+            }).on("timeupdate", function () {
+
+                if (!self.isPositionSliderActive) {
+
+                    self.setCurrentTime(self.getCurrentTicks(this), item, true);
+                }
+
+            }).on("ended.playbackstopped", self.onPlaybackStopped).on('ended.playnext', self.playNextAfterEnded);
+
+            currentItem = item;
+            curentDurationTicks = item.RunTimeTicks;
+
+            return audioElement[0];
+        };
+
+        function canPlayAudioStreamDirect(audioStream) {
+
+            var audioCodec = (audioStream.Codec || '').toLowerCase().replace('-', '');
+
+            if (audioCodec.indexOf('aac') == -1 &&
+                audioCodec.indexOf('mp3') == -1 &&
+                audioCodec.indexOf('mpeg') == -1) {
+
+                return false;
+            }
+
+            if (audioStream.Channels == null) {
+                return false;
+            }
+
+            // IE won't play at all if more than two channels
+            if (audioStream.Channels > 2 && $.browser.msie) {
+                return false;
+            }
+
+            return true;
+        };
+
+        function trunc(string, len) {
+            if (string.length > 0 && string.length < len) return string;
+            var trimmed = $.trim(string).substring(0, len).split(" ").slice(0, -1).join(" ");
+            if (trimmed) {
+                trimmed += "...";
+            } else {
+                trimmed = "---"
+            }
+            return trimmed;
+        };
+
+        function trimTitle(title) {
+            return title.replace("\n---", "");
+        };
+
+        function titleHtml(title) {
+            var titles = title.split("\n");
+            return (trunc(titles[0], 30) + "<br />" + trunc(titles[1], 30)).replace("---", "&nbsp;");
+        };
+
+        var getItemFields = "MediaStreams,Chapters,Path";
     }
 
     window.MediaPlayer = new mediaPlayer();
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index 85ccf596a8..7a42fbe5f2 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -1313,28 +1313,81 @@ $(ApiClient).on("websocketmessage", Dashboard.onWebSocketMessageReceived);
 
 
 $(function () {
-    var footerHtml = '<div id="footer" data-theme="b" class="ui-bar-b" style="display: none;">';
 
-    footerHtml += '<div id="mediaPlayer" style="display: none;">';
+    var videoPlayerHtml = '<div id="mediaPlayer" data-theme="b" class="ui-bar-b" style="display: none;">';
 
-    footerHtml += '<div id="videoBackdrop" style="display: none;">';
+    videoPlayerHtml += '<div id="videoBackdrop">';
+    videoPlayerHtml += '<div id="videoPlayer">';
+    videoPlayerHtml += '<div id="videoElement">';
 
-    footerHtml += '<div id="videoPlayer">';
-    footerHtml += '<div id="mediaElement"></div>';
-    footerHtml += '</div>';
+    videoPlayerHtml += '<div id="play" class="status"></div>';
+    videoPlayerHtml += '<div id="pause" class="status"></div>';
 
-    footerHtml += '</div>';
+    videoPlayerHtml += '</div>';
 
-    footerHtml += '<div id="nowPlayingBar" class="nowPlayingBar">';
+    // Create controls
+    videoPlayerHtml += '<div id="videoControls" class="videoControls">';
 
-    footerHtml += '<div class="barBackground ui-bar-b">';
+    videoPlayerHtml += '<div class="positionSliderContainer sliderContainer">';
+    videoPlayerHtml += '<input type="range" class="mediaSlider positionSlider slider" step=".001" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
+    videoPlayerHtml += '</div>';
 
+    videoPlayerHtml += '<a id="video-playlistButton" class="mediaButton playlistButton" href="playlist.videoPlayerHtml" data-role="button" data-icon="bullets" data-iconpos="notext" data-inline="true" title="Playlist">Playlist</a>';
+    videoPlayerHtml += '<button id="video-previousTrackButton" class="mediaButton previousTrackButton" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">Previous Track</button>';
+    videoPlayerHtml += '<button id="video-playButton" class="mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-icon="play" data-iconpos="notext" data-inline="true">Play</button>';
+    videoPlayerHtml += '<button id="video-pauseButton" class="mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-icon="pause" data-iconpos="notext" data-inline="true">Pause</button>';
+
+    videoPlayerHtml += '<button id="video-stopButton" class="mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-icon="stop" data-iconpos="notext" data-inline="true">Stop</button>';
+    videoPlayerHtml += '<button id="video-nextTrackButton" class="mediaButton nextTrackButton" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">Next Track</button>';
+
+    videoPlayerHtml += '<div class="currentTime"></div>';
+    videoPlayerHtml += '<div class="nowPlayingMediaInfo"></div>';
+
+    videoPlayerHtml += '<button id="video-muteButton" class="mediaButton muteButton" title="Mute" type="button" onclick="MediaPlayer.mute();" data-icon="audio" data-iconpos="notext" data-inline="true">Mute</button>';
+    videoPlayerHtml += '<button id="video-unmuteButton" class="mediaButton unmuteButton" title="Unmute" type="button" onclick="MediaPlayer.unmute();" data-icon="volume-off" data-iconpos="notext" data-inline="true">Unmute</button>';
+
+    videoPlayerHtml += '<div class="volumeSliderContainer sliderContainer">';
+    videoPlayerHtml += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="1" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
+    videoPlayerHtml += '</div>';
+
+    videoPlayerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="action" data-iconpos="notext" data-inline="true">Fullscreen</button>';
+
+    videoPlayerHtml += '<button onclick="MediaPlayer.showQualityFlyout();" id="video-qualityButton" class="mediaButton qualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">Quality</button>';
+    videoPlayerHtml += '<div class="mediaFlyoutContainer"><div id="video-qualityFlyout" style="display:none;" class="mediaPlayerFlyout"></div></div>';
+
+    videoPlayerHtml += '<button onclick="MediaPlayer.showAudioTracksFlyout();" id="video-audioTracksButton" class="imageButton mediaButton audioTracksButton" title="Audio tracks" type="button" data-icon="audiocd" data-iconpos="notext" data-inline="true">Audio Tracks</button>';
+    videoPlayerHtml += '<div class="mediaFlyoutContainer"><div id="video-audioTracksFlyout" style="display:none;" class="mediaPlayerFlyout audioTracksFlyout"></div></div>';
+
+    videoPlayerHtml += '<button onclick="MediaPlayer.showSubtitleMenu();" id="video-subtitleButton" class="imageButton mediaButton subtitleButton" title="Subtitles" type="button" data-icon="subtitles" data-iconpos="notext" data-inline="true">Subtitles</button>';
+    videoPlayerHtml += '<div class="mediaFlyoutContainer"><div id="video-subtitleFlyout" style="display:none;" class="mediaPlayerFlyout subtitleFlyout"></div></div>';
+
+    videoPlayerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="video-chaptersButton" class="mediaButton chaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">Scenes</button>';
+    videoPlayerHtml += '<div class="mediaFlyoutContainer"><div id="video-chaptersFlyout" style="display:none;" class="mediaPlayerFlyout chaptersFlyout"></div></div>';
+
+    videoPlayerHtml += '<button onclick="MediaPlayer.showSendMediaMenu();" id="video-sendMediaButton" class="mediaButton sendMediaButton" title="Remote" type="button" data-icon="wireless" data-iconpos="notext" data-inline="true">Remote</button>';
+
+    videoPlayerHtml += '</div>'; // videoControls
+
+    videoPlayerHtml += '</div>'; // videoPlayer
+    videoPlayerHtml += '</div>'; // videoBackdrop
+    videoPlayerHtml += '</div>'; // mediaPlayer
+
+    $(document.body).append(videoPlayerHtml);
+
+    var mediaPlayerElem = $('#mediaPlayer', document.body);
+    mediaPlayerElem.trigger('create');
+
+    var footerHtml = '<div id="footer" data-theme="b" class="ui-bar-b">';
+    footerHtml += '<div id="nowPlayingBar" class="nowPlayingBar" style="display:none;">';
+    footerHtml += '<div class="barBackground ui-bar-b"></div>';
     footerHtml += '<div style="display:inline-block;width:12px;"></div>';
     footerHtml += '<a id="playlistButton" class="mediaButton playlistButton" href="playlist.html" data-role="button" data-icon="bullets" data-iconpos="notext" data-inline="true" title="Playlist">Playlist</a>';
     footerHtml += '<button id="previousTrackButton" class="mediaButton previousTrackButton" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">Previous Track</button>';
     footerHtml += '<button id="playButton" class="mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-icon="play" data-iconpos="notext" data-inline="true">Play</button>';
     footerHtml += '<button id="pauseButton" class="mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-icon="pause" data-iconpos="notext" data-inline="true">Pause</button>';
 
+    footerHtml += '<div id="mediaElement"></div>';
+
     footerHtml += '<button id="stopButton" class="mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-icon="stop" data-iconpos="notext" data-inline="true">Stop</button>';
     footerHtml += '<button id="nextTrackButton" class="mediaButton nextTrackButton" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">Next Track</button>';
 
@@ -1352,8 +1405,6 @@ $(function () {
     footerHtml += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="1" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
     footerHtml += '</div>';
 
-    footerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="action" data-iconpos="notext" data-inline="true">Fullscreen</button>';
-
     footerHtml += '<button onclick="MediaPlayer.showQualityFlyout();" id="qualityButton" class="mediaButton qualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">Quality</button>';
     footerHtml += '<div class="mediaFlyoutContainer"><div id="qualityFlyout" style="display:none;" class="mediaPlayerFlyout"></div></div>';
 
@@ -1366,16 +1417,13 @@ $(function () {
     footerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="chaptersButton" class="mediaButton chaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">Scenes</button>';
     footerHtml += '<div class="mediaFlyoutContainer"><div id="chaptersFlyout" style="display:none;" class="mediaPlayerFlyout chaptersFlyout"></div></div>';
 
+    footerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="action" data-iconpos="notext" data-inline="true">Fullscreen</button>';
+
     footerHtml += '<button onclick="MediaPlayer.showSendMediaMenu();" id="sendMediaButton" class="mediaButton sendMediaButton" title="Remote" type="button" data-icon="wireless" data-iconpos="notext" data-inline="true">Remote</button>';
 
     footerHtml += '</div>';
 
-    footerHtml += '</div>';
-
-    footerHtml += '</div>';
-
     footerHtml += '<div id="footerNotifications"></div>';
-
     footerHtml += '</div>';
 
     $(document.body).append(footerHtml);