javascript - Establecer el foco del teclado en un incrustado de YouTube

Estoy tratando de encontrar una manera de hacer que el teclado se enfoque en el reproductor de YouTube en mi página. Esto podría, por ejemplo, facilitar el uso de la barra espaciadora para reproducir/pausar el video.

Aquí hay un ejemplo: Probando el enfoque del teclado incrustado (CodePen)

Tal como está, tengo que hacer clic en el reproductor para que pueda aceptar los atajos de teclado. Como esto no es ideal, espero una solución usando Javascript o jQuery para establecer el enfoque en el video.

Soy consciente de que, como alternativa, podría usar la tecla de espacio para llamar a los métodos playVideo o pauseVideo del objeto del reproductor, pero eso aún no me daría acceso a la lista completa de los controles de teclado del reproductor de YouTube.

Y si esto es simplemente imposible, lo entenderé. ¡Pero será agradable saberlo. Gracias!

Respuesta #1

Puedes hacer algo como esto para implementar cualquier atajo de teclado que quieras habilitar para el jugador de todos modos.

http://codepen.io/anon/pen/jbgeYo

Básicamente creas un input (puedes darle estilo para que se mezcle, no puedes usar display:none ya que eso no permitiría asignarle el foco), y luego adjuntas un evento keypress a ese input. Luego puedes llamar a funciones en el objeto API "player" que te permite reproducir/pausar, etc.

var dummy=document.getElementById("dummyFocus");
dummy.focus();
dummy.addEventListener("keypress",function(event){
  if(event.keyCode== 32){
    if(player.getPlayerState() == 1){
      player.pauseVideo();
    }
    else{
      player.playVideo();
    }
  }
});

Inserta eso después de crear tu objeto de jugador, y añade un input (yo usé type="button") a la página con id="dummyFocus"

Edita según sea necesario, pero eso es una solución temporal de todos modos.

Respuesta #2

Para lograr esto tendrías que focus() en el documento incrustado en el iframe de Youtube. Esto está restringido por la política de mismo origen por razones de seguridad.

Aquí hay un fragmento de código para mayor completitud

function onPlayerReady(event) {
    document.querySelector('#player').contentDocument.body.focus(); 
}

Y arrojaría

Error de seguridad no detectado: No se pudo leer la propiedad 'contentDocument' de 'HTMLIFrameElement':