diff --git a/src/components/htmlMediaHelper.js b/src/components/htmlMediaHelper.js
index 82d6d790bc..7f623ee2cc 100644
--- a/src/components/htmlMediaHelper.js
+++ b/src/components/htmlMediaHelper.js
@@ -200,17 +200,22 @@ import { Events } from 'jellyfin-apiclient';
             const promise = elem.play();
             if (promise && promise.then) {
                 // Chrome now returns a promise
-                return promise.catch(function (e) {
-                    const errorName = (e.name || '').toLowerCase();
-                    // safari uses aborterror
-                    if (errorName === 'notallowederror' ||
-                        errorName === 'aborterror') {
-                        // swallow this error because the user can still click the play button on the video element
+                return promise
+                    .then(() => {
                         onSuccessfulPlay(elem, onErrorFn);
                         return Promise.resolve();
-                    }
-                    return Promise.reject();
-                });
+                    })
+                    .catch((e) => {
+                        const errorName = (e.name || '').toLowerCase();
+                        // safari uses aborterror
+                        if (errorName === 'notallowederror' ||
+                            errorName === 'aborterror') {
+                            // swallow this error because the user can still click the play button on the video element
+                            onSuccessfulPlay(elem, onErrorFn);
+                            return Promise.resolve();
+                        }
+                        return Promise.reject();
+                    });
             } else {
                 onSuccessfulPlay(elem, onErrorFn);
                 return Promise.resolve();