jquery - 全屏播放/暂停带有空格键的 HTML5 视频会发出错误声音

Question

重要提示：这是 Safari 10 Public Beta 中的一个错误

我的代码应该这样做，空格键成为播放/暂停视频的快捷方式，但仅当用户将鼠标悬停在视频上或全屏时。

它有效！但是在全屏模式下，它会发出错误的声音，为什么？

这是我的代码：

objectVideo.hover(function(){
    $(window).keyup(function(e) {
        if (e.which == 32) {
            playVideo();
        }
    });
});

如果有更好的方法，或者如果你知道如何解决它，我会很高兴

注意：在 Safari 10 中测试

Answer 1

确保在键处理程序之外检测到鼠标悬停在视频上，然后在键处理程序中检查它是否处于全屏模式或被鼠标悬停

var native = objectVideo.get(0);

objectVideo.on('mouseenter mouseleave', function(e) {
    $(this).data('isHovered', e.type==='mouseenter');
});

$(document).on('keyup', function(e) {
    if (e.which == 32) {
        var fullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
        var isHovered  = objectVideo.data('isHovered');

        if (fullScreen || isHovered) {
            native.paused ? native.play() : native.pause();
        }
    }
});

例子