diff --git a/ui/component/fileRender/view.jsx b/ui/component/fileRender/view.jsx
index 9f8557e7a..16b25f412 100644
--- a/ui/component/fileRender/view.jsx
+++ b/ui/component/fileRender/view.jsx
@@ -104,6 +104,12 @@ class FileRender extends React.PureComponent<Props> {
 
     // Supported contentTypes
     const contentTypes = {
+      'application/x-ext-mkv': (
+        <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.onEndedCb} />
+      ),
+      'video/x-matroska': (
+        <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.onEndedCb} />
+      ),
       'application/pdf': <PdfViewer source={downloadPath || source} />,
       'text/html': <HtmlViewer source={downloadPath || source} />,
       'text/htm': <HtmlViewer source={downloadPath || source} />,
diff --git a/ui/component/fileViewer/view.jsx b/ui/component/fileViewer/view.jsx
index c34372c74..8574184a4 100644
--- a/ui/component/fileViewer/view.jsx
+++ b/ui/component/fileViewer/view.jsx
@@ -58,9 +58,12 @@ export default function FileViewer(props: Props) {
   });
 
   const inline = pageUri === uri;
+  const forceVideo = ['application/x-ext-mkv', 'video/x-matroska'].includes(contentType);
   const webStreamOnly = contentType === 'application/pdf' || mediaType === 'text';
   const isReadyToPlay =
-    (IS_WEB && (isStreamable || webStreamOnly)) || (isStreamable && streamingUrl) || (fileInfo && fileInfo.completed);
+    (IS_WEB && (isStreamable || webStreamOnly || forceVideo)) ||
+    ((isStreamable || forceVideo) && streamingUrl) ||
+    (fileInfo && fileInfo.completed);
   const loadingMessage =
     !isStreamable && fileInfo && fileInfo.blobs_completed >= 1 && (!fileInfo.download_path || !fileInfo.written_bytes)
       ? __("It looks like you deleted or moved this file. We're rebuilding it now. It will only take a few seconds.")
diff --git a/ui/component/fileViewerInitiator/view.jsx b/ui/component/fileViewerInitiator/view.jsx
index 856a34ad7..699d30feb 100644
--- a/ui/component/fileViewerInitiator/view.jsx
+++ b/ui/component/fileViewerInitiator/view.jsx
@@ -45,10 +45,11 @@ export default function FileViewer(props: Props) {
     costInfo,
   } = props;
   const cost = costInfo && costInfo.cost;
-  const isPlayable = ['audio', 'video'].includes(mediaType);
+  const forceVideo = ['application/x-ext-mkv', 'video/x-matroska'].includes(contentType);
+  const isPlayable = ['audio', 'video'].includes(mediaType) || forceVideo;
   const fileStatus = fileInfo && fileInfo.status;
   const webStreamOnly = contentType === 'application/pdf' || mediaType === 'text';
-  const supported = (IS_WEB && (isStreamable || webStreamOnly)) || !IS_WEB;
+  const supported = (IS_WEB && (isStreamable || webStreamOnly || forceVideo)) || !IS_WEB;
 
   // Wrap this in useCallback because we need to use it to the keyboard effect
   // If we don't a new instance will be created for every render and react will think the dependencies have changed, which will add/remove the listener for every render