Обнаружение фокуса на видео HTML5

Question

Как и при использовании youtube, если вы нажмете «play» или «pause», фокус находится на видео, и с помощью spacebar будет приостановлена ​​или воспроизведена видео.

В той же строке я хотел бы предотвратить действие spacebar после игры на видео в формате HTML5. Для этого я пытался обнаружить сфокусированный элемент, но похоже, что элемент видео не получает событие focus таким же образом.

Я попытался не используя JQuery для него:

$(':focus'); 

И равнину Javascript:

document.activeElement 

None с успехом.

Answer 1

Добавить прослушиватель событий к вашему видеоэлементу и событию игры фокус какого-либо другой элемента (фокусируемого) на фиктивные кнопках, которая не делает ничего

var video=document.getElementById("MyVideo"); 

video.addEventListener('play', function() { 
    document.getElementById("myDummyButton").focus(); 
}); 

это заберет внимание от вашего видео элемента страницы, например, к фиктивной кнопке, как только будет воспроизводиться видео. Вы также можете сделать то же самое для события паузы.

И аккуратно поместите кнопку рядом с вашим видеоэлементом, потому что фокусировка на ней приведет к прокрутке страницы, если она помещена где-то внизу на странице с экрана. Также имейте в виду, что все типы элементов не могут быть сфокусированы.

Answer 2

Использование так:

document.getElementByID("video").onfocus = function(){} 

Answer 3

Вы можете добавить ключевой обработчик события, так что вы можете отфильтровать ключевые события на видео элементе.

video.addEventListener("keydown", function(evt) { 
    /* check the key you don't want and if hit call: */ 
    evt.preventDefault(); 
}, false); 

Вы можете заставить элемент принимать фокус, указав атрибут TabIndex, если он еще не

<video tabindex="1" /* etc. */ ></video>