Question

我不知道如何处理这个问题。如果我有两个div div id 1和div id 2. Div id 2包含一个视频但是被隐藏了。 Div id1有一个按钮。

如果我使用回车键激活按钮，则会隐藏div id 1并显示div id 2并暂停视频。但是，如果我使用空格键激活按钮，则显示div id 1并显示div id 2 - 除了视频正在播放，因为当我使用按钮上的空格键时，播放按钮被激活。

我如何拥有它，只按空格键触发div id 1按钮？

HTML

            `<div id="container" role="region" aria-label="Introduction to ...">
                <div id="box_01">
                <h2> Intro</h2>
                <p>Intro content</p>
                <button id="button_01" aria-label="Show video">OK</button>
                </div>
                <div id="box_02" aria-hidden="true">
                    <video id="video1" preload="auto" width="480" height="360" poster="" data-able-player>
                      <source type="video/webm" src=""/>
                        <source type="video/mp4" src=""/>
                        <track kind="captions" src=""/>
                    </video>
                </div>
            </div>`

基本CSS

.box_02 {
   display:none;
}

JQuery的

<script>
    $('#button_01').on('click', function(e) {
        $('#box_01').hide().attr('aria-hidden','true');
        $('#box_02').fadeIn(300).attr('aria-hidden','false');
    });
</script>

Answer 1

我不知道这是否有帮助 - 对视频不做太多，抱歉。此事件处理程序只是阻止视频播放器元素处理Enter和Spacebar。你当然可以做更多 - 但希望这足以让你取得一些进展

$(document).on('keydown', '#video1', function(e) {
    if (e.keyCode == 32 || e.keyCode == 13) {
        e.preventDefault();
    }
});

将空格键触发器限制为按钮

1 个答案: