Question

重要说明：这是公开测试版
中Safari 10中的错误

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

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

这是我的代码：

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

播放/暂停全屏空格键的HTML5视频会产生错误声音

1 个答案: