diff --git a/src/_h5ai/public/js/lib/ext/preview/preview-aud.js b/src/_h5ai/public/js/lib/ext/preview/preview-aud.js
index 722272b1..67e315c6 100644
--- a/src/_h5ai/public/js/lib/ext/preview/preview-aud.js
+++ b/src/_h5ai/public/js/lib/ext/preview/preview-aud.js
@@ -37,6 +37,12 @@ const load = item => {
             .attr('controls', 'controls');
         if (settings.autoplay) {
             $el.attr('autoplay', 'autoplay');
+            $el.on('loadeddata', () => {
+                var isPlaying = $el[0].currentTime > 0 && !$el[0].paused && !$el[0].ended;
+                if (!isPlaying) {
+                    $el[0].play();
+                }
+            });
         }
         addUnloadFn($el[0]);
         $el.attr('src', item.absHref);
diff --git a/src/_h5ai/public/js/lib/ext/preview/preview-vid.js b/src/_h5ai/public/js/lib/ext/preview/preview-vid.js
index 4c0d5923..3e620318 100644
--- a/src/_h5ai/public/js/lib/ext/preview/preview-vid.js
+++ b/src/_h5ai/public/js/lib/ext/preview/preview-vid.js
@@ -41,6 +41,12 @@ const load = item => {
             .attr('controls', 'controls');
         if (settings.autoplay) {
             $el.attr('autoplay', 'autoplay');
+            $el.on('loadeddata', () => {
+                var isPlaying = $el[0].currentTime > 0 && !$el[0].paused && !$el[0].ended;
+                if (!isPlaying) {
+                    $el[0].play();
+                }
+            });
         }
         addUnloadFn($el[0]);
         $el.attr('src', item.absHref);