play/pause HTML5 全屏使用空格键的视频发出错误声音

Question

Important: This was a bug in Safari 10 Public Beta

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

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

这是我的代码：

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();
        }
    }
});

Example

play/pause HTML5 全屏使用空格键的视频发出错误声音

play/pause HTML5 video with spacebar in fullscreen makes error sound

safari

jquery

html5-video

html5-fullscreen