Удалить видео при наведении курсора на нужное время

Question

Это видео показывает элементы управления при наведении и скрывает их, когда курсор отсутствует.Как я могу сохранить то же поведение, но удалить элементы управления только по истечении определенного периода времени (3 секунды) ..?

$('#video').hover(function toggleControls() {
  if (this.hasAttribute("controls")) {
    /* setTimeout(function() {
    this.removeAttribute("controls")
    }, 3000)*/
    this.removeAttribute("controls")
  } else {
    this.setAttribute("controls", "controls")
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video width="30%" id="video">
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
    </video>

Answer 1

Отключить панель по умолчанию.И построить свой собственный, где у вас есть полный контроль.По моему опыту, изменения не сработали должным образом во всех браузерах / устройствах.