Question

我有一个包含多个HTML5视频的页面。我想利用键盘和鼠标事件与每个视频进行交互。在Flash中，这不是问题，因为一旦您点击视频对象，该特定视频将获得焦点并从任何输入设备接收所有事件，除非您单击它。我还不熟悉HTML5视频，但我不确定如何使用javascript模仿HTML5视频中的focus功能，因为视频代码中不存在focus，您可以' t没有它就控制一个视频。

非常感谢提前！

Answer 1

你试过了吗？

<video id="foo">
</video>

<script>
  document.getElementById('foo').focus();
</script>

焦点方法为键盘提供键盘焦点。

Answer 2

我找到了一种利用全局变量伪造focus视频元素的方法。例如：

    $(function(){
        var focused_vid;
        $('video').click(function(){ focused_vid = this });
        $(document).keydown(function(e){ 
            if (focused_vid){
                var skip_step = focused_vid.duration*.01;

                switch(e.which){
                    case 37: // Back arrow
                        focused_vid.currentTime -= skip_step;
                        break;

                    case 39: // Forward arrow
                        focused_vid.currentTime += skip_step;
                        break;
                }
            }
        });
    });

Answer 3

实际上，如果将tab-index设置为数值，则会这样做：

<video tab-index='-1' />

用于输入设备的HTML5视频焦点

3 个答案: