diff --git a/media/css/seahub.css b/media/css/seahub.css
index 2d4ee9305e..156a7b20e6 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -1804,4 +1804,13 @@ textarea:-moz-placeholder {/* for FF */
 .pubinfo-item .obj {
     font-size:11px;
     color:#999;
+.video-container {
+    margin: auto;
+    width: 800px;
+    height: 400px;
 }
+.audio-container {
+    margin: auto;
+    width: 500px;
+    height: 30px;
+}
\ No newline at end of file
diff --git a/templates/snippets/file_content_js.html b/templates/snippets/file_content_js.html
index 25b6d8dd48..26cd73c109 100644
--- a/templates/snippets/file_content_js.html
+++ b/templates/snippets/file_content_js.html
@@ -162,6 +162,15 @@ if (!($.browser.msie && parseInt($.browser.version) < 10)) {
 }
 {% endif %}
 
+{% if filetype == 'Video' %}
+      $('#file-view').html('<div class="video-container"><video src="{{raw_path}}" width="800" height="400"></video></div>');
+$('video').mediaelementplayer(/* Options */);
+{% endif %}
+
+{% if filetype == 'Audio' %}
+      $('#file-view').html('<div class="audio-container"><audio src="{{raw_path}}" width="500" height="30"></audio></div>');
+$('audio').mediaelementplayer(/* Options */);
+{% endif %}
 {% if filetype == 'Unknown' %}
 $('#file-view').html('<div id="file-view-tip"><p>{% trans "This type of file cannot be viewed online." %}</p></div>');
 {% endif %}
diff --git a/templates/snippets/file_view_js.html b/templates/snippets/file_view_js.html
index 5de5b160f5..f652bf43f5 100644
--- a/templates/snippets/file_view_js.html
+++ b/templates/snippets/file_view_js.html
@@ -7,6 +7,9 @@
 {% if filetype == 'PDF' and use_pdfjs %}
 <script type="text/javascript" src="{{MEDIA_URL}}js/pdf.js"></script>
 {% endif %}
+{% if filetype == 'Video'  or filetype == 'Audio' %}
+<script src="{{MEDIA_URL}}js/mediaelement-and-player.min.js"></script>
+{% endif %}
 {% if filetype == 'Markdown' %}
 <script type="text/javascript" src="{{MEDIA_URL}}js/showdown.js"></script>
 {% endif %}
diff --git a/templates/snippets/file_view_style.html b/templates/snippets/file_view_style.html
index d36c89a722..a6324e8e0a 100644
--- a/templates/snippets/file_view_style.html
+++ b/templates/snippets/file_view_style.html
@@ -19,3 +19,7 @@
 #file-view { text-align:center; padding:30px 0; }
 </style>
 {% endif %}
+
+{% if filetype == 'Video'  or filetype == 'Audio' %}
+<link rel="stylesheet" href="{{MEDIA_URL}}css/mediaelementplayer.css" />
+{% endif %}
diff --git a/utils/__init__.py b/utils/__init__.py
index 8e6a9e109c..284cc1f3b8 100644
--- a/utils/__init__.py
+++ b/utils/__init__.py
@@ -45,6 +45,8 @@ PREVIEW_FILEEXT = {
     'PDF': ('pdf',),
     'Markdown': ('markdown', 'md'),
     'Sf': ('seaf',),
+    'Video': ('mp4', 'ogv', 'webm', 'flv'),
+    'Audio': ('mp3',),
 }
 
 def gen_fileext_type_map():