Estoy creando una página html simple con un reproductor de audio dentro de un iframe. Necesito habilitar el tipo de reproducción automática para escritorio y móvil.
El reproductor es este:
<div style="width: 100%"><iframe src="https://players.rcast.net/fixedbar1/66549" frameborder="0" scrolling="no" autoplay style="width: 100%"></iframe></div>Puse este bloque en la parte inferior de la página html:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> document.addEventListener("DOMContentLoaded", function() { // this function runs when the DOM is ready setTimeout(function(){ document.querySelector('.play-btn').click(); },3000); //delay is in milliseconds }); </script> Usando la consola de firefox document.querySelector('.play-btn').click(); funciona bien, pero en tiempo de ejecución obtengo:
Uncaught TypeError: document.querySelector(...) is null¿Alguna idea o mejor manera?
gracias rojo
Puede hacer lo que quiera en la consola, pero solo podrá acceder al contenido de iframe mediante programación si su dominio de iframe coincide con su dominio actual.
Dicho esto, puedes:
Seleccione el iframe, luego ejecute el selector de consultas en el iframe (ni siquiera necesita jQuery para ello):
const iframeElement = document.querySelector('iframe'); iframeElement.querySelector('.play-btn').click();Puntas:
También puede reproducir el video o la música directamente llamando a play() en los elementos multimedia. Para que pueda cortar el clic estimulante en el botón.
querySelector es más lento que getElementById , puede asignar un atributo de id a su iframe/botón/elemento multimedia y encontrarlo directamente.
También lo ayudará a evitar errores porque querySelector devuelve la primera coincidencia. Entonces, en caso de que tenga varios iframe o varios elementos con la clase .play-btn , puede provocar un comportamiento inesperado.
debe seleccionar iframe al principio y obtener su ventana de contenido para acceder a todos los elementos en él.
const myIframe = document.querySelector('#iframe_id') const myIframeDocument =myIframe.contentWindow.document const myElement = myIframeDocument.body.querySelector('#target_element')es notable que el iframe debe cargarse por completo antes de su proceso y también el conflicto de dominio
Espero que esto ayude:
<iframe id="video1" width="450" height="280" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowtransparency="true" allowfullscreen></iframe> <a href="#" id="playvideo">Play button</a> <script> $("#playvideo").click(function(){ $("#video1")[0].src += "?autoplay=1"; }); </script>Encontré esto en Grepper , pero era de otra publicación deStack Overflow . Si eso no ayuda, encontré una publicación diferente que parece estar más relacionada con el error .