Chrome66中play()请求被pause()调用中断的错误排查求助

Hey there, let's break down why you're hitting this error and get it fixed right away.

First, let's recap the error you're seeing:

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()

What's causing this? #

The issue lies straight in your displayClick event handler. You're calling jwplayer().play() immediately followed by jwplayer().pause()—but here's the critical detail: the play() method returns a Promise, meaning it runs asynchronously. When you call pause() right after, you're cutting off the play request before it can finish processing, which throws that DOM exception. On top of that, this back-to-back play/pause sequence doesn't make much sense for most real-world use cases!

Your viewable event logic looks totally fine, so we just need to fix the displayClick part.

Fix 1: Toggle play/pause on click (most common use case) #

If you want users to toggle the playback state when clicking the player display, use the player's getState() method to check its current status, then act accordingly:

<script>
// Keep your viewable event logic as-is
jwplayer().on('viewable', function (e) {
    e.viewable ? jwplayer().play() : jwplayer().pause();
});

// Rewrite the displayClick handler
jwplayer().on('displayClick', function(){
    const player = jwplayer();
    if (player.getState() === 'PLAYING') {
        player.pause();
    } else {
        player.play();
    }
});
</script>

Fix 2: If you really need to play then pause (uncommon) #

If for some specific reason you need to trigger play then immediately pause it, you have to wait for the play() Promise to resolve before calling pause(). Using async/await makes this clean and straightforward:

<script>
jwplayer().on('viewable', function (e) {
    e.viewable ? jwplayer().play() : jwplayer().pause();
});

jwplayer().on('displayClick', async function(){
    const player = jwplayer();
    try {
        // Wait for the play request to complete before pausing
        await player.play();
        player.pause();
    } catch (err) {
        // Handle cases where play fails (like no prior user interaction)
        console.error('Playback failed:', err);
    }
});
</script>

One quick side note: Modern browsers like Chrome require user interaction (such as a click) before media can play. If your viewable event fires before the user has interacted with the page, that might cause additional playback errors—but your current issue is definitely rooted in the displayClick handler.

内容的提问来源于stack exchange，提问作者Maca