javascript - HTML5 音频 : Using both oncanplay and oncanplaythrough events for audio

Question

我被告知要同时使用 oncanplay 和 oncanplaythrough 事件，因为 oncanplay 在某些浏览器中可能不可靠:

在我的代码中，我只使用了 oncanplay 事件。如何设置我的代码，以便我能够像我被告知的那样使用这两个事件？

// player is an HTML5 Audio Element

player.oncanplay = function () {
        if (value.value !== "") {
            canPlay = true;
            playPauseIcon(true);
        }
    };  

我的完整代码 list 在这里:https://jsfiddle.net/vhgL96se/142/

Answer 1

如果您担心 canplay 事件没有触发，您可以结合使用 canplaythrough 和 canplay 事件。根据您的代码，应该可以或多或少地为两个事件重用相同的事件处理程序。

考虑以下更改，即使用 addEventListener() 为这两个事件注册处理程序，以及声明一个具有稍微修改逻辑的通用处理程序函数:

// Define a common handler function that will be reused for
// both events
function playerMediaPlayable() {

    // Add canPlay !== true to prevent playPauseIcon() being
    // called a second time if 'canplaythrough' fires after 'canplay'
    if (value.value !== "" && canPlay !== true) {

        canPlay = true;
        playPauseIcon(true);
    }
}

// Use playerMediaPlayable handler for both events
player.addEventListener('canplay', playerMediaPlayable);
player.addEventListener('canplaythrough', playerMediaPlayable);  

希望对您有所帮助!