diff --git a/app/components/file-preview/component.js b/app/components/file-preview/component.js
index 52a28e4..7b1c4fb 100644
--- a/app/components/file-preview/component.js
+++ b/app/components/file-preview/component.js
@@ -1,7 +1,7 @@
 import Component from '@ember/component';
 import { inject as service } from '@ember/service';
-import { computed, observer } from '@ember/object';
-import { alias } from '@ember/object/computed';
+import { observer } from '@ember/object';
+import { alias, none, not } from '@ember/object/computed';
 import { scheduleOnce } from '@ember/runloop';
 import JSONTreeView from 'npm:json-tree-view';
 
@@ -15,7 +15,7 @@ export default Component.extend({
   uploadingChanges: false,
 
   showEditor: null,
-  hideEditor: computed.not('showEditor'),
+  hideEditor: not('showEditor'),
 
   fileContent: null,
   objectURL: null,
@@ -24,8 +24,19 @@ export default Component.extend({
   type: alias('metaData.type'),
   isBinary: alias('metaData.isBinary'),
 
+  isUnknownBinary: none('isImage', 'isAudio', 'isVideo'),
+
   isImage: function() {
-    return this.get('type').match(/^image\/.+$/); }.property('type'),
+    return this.get('type').match(/^image\/.+$/);
+  }.property('type'),
+
+  isAudio: function() {
+    return this.get('type').match(/^audio\/.+$/);
+  }.property('type'),
+
+  isVideo: function() {
+    return this.get('type').match(/^video\/.+$/);
+  }.property('type'),
 
   isText: function() {
     return !this.get('isBinary');
@@ -34,8 +45,16 @@ export default Component.extend({
   loadFile: function() {
     let path = this.get('metaData.path');
 
+    if (this.get('isAudio') || this.get('isVideo')) {
+      this.set('fileLoaded', true);
+      this.set('objectURL', this.get('storage.client')
+                                .getItemURL(path));
+      return;
+    }
+
     // TODO don't fetch is size above certain limit
 
+    console.debug(`[file-preview] Loading file ${this.get('metaData.name')}`)
     this.get('storage.client').getFile(path).then(file => {
       if (this.get('isImage')) {
         let view = new window.Uint8Array(file.data);
diff --git a/app/components/file-preview/template.hbs b/app/components/file-preview/template.hbs
index 6baecfb..e896339 100644
--- a/app/components/file-preview/template.hbs
+++ b/app/components/file-preview/template.hbs
@@ -1,9 +1,16 @@
 {{#if fileLoaded}}
   {{#if isBinary}}
+    {{#if isUnkownBinary}}
+      <p>No preview available for this content type.</p>
+    {{/if}}
     {{#if isImage}}
       <img src={{objectURL}} alt={{metaData.name}}>
-    {{else}}
-      <p>No preview available for this content type.</p>
+    {{/if}}
+    {{#if isAudio}}
+      <audio src={{objectURL}} controls />
+    {{/if}}
+    {{#if isVideo}}
+      <video src={{objectURL}} controls />
     {{/if}}
   {{/if}}
 
diff --git a/app/styles/components/_file-preview.scss b/app/styles/components/_file-preview.scss
index 07324d2..bfd9ab0 100644
--- a/app/styles/components/_file-preview.scss
+++ b/app/styles/components/_file-preview.scss
@@ -7,7 +7,7 @@
     hyphens: none;
   }
 
-  img {
+  img, audio, video {
     max-width: 100%;
   }
 
diff --git a/tests/integration/components/file-preview/component-test.js b/tests/integration/components/file-preview/component-test.js
index ed9001d..3659334 100644
--- a/tests/integration/components/file-preview/component-test.js
+++ b/tests/integration/components/file-preview/component-test.js
@@ -6,10 +6,17 @@ moduleForComponent('file-preview', 'Integration | Component | file preview', {
 });
 
 test('it renders', function(assert) {
-  // Set any properties with this.set('myProperty', 'value');
-  // Handle any actions with this.on('myAction', function(val) { ... });
+  this.set('metaData', {
+    etag: "714148227",
+    isBinary: false,
+    isFolder: false,
+    name: "fra-pdx",
+    path: "trips/2018/06/19/fra-pdx",
+    size: 92086791,
+    type: "application/json"
+  });
 
-  this.render(hbs`{{file-preview}}`);
+  this.render(hbs`{{file-preview metaData=metaData}}`);
 
   assert.equal(this.$().text().trim(), '');
 });