1

I'm creating a simple html page with one audio player inside an iframe. I need to enamble kind of autoplay for desktop and mobile.

The player is this one:

<div style="width: 100%"><iframe src="https://players.rcast.net/fixedbar1/66549" frameborder="0" scrolling="no" autoplay style="width: 100%"></iframe></div>

I put this block on the bottom of the html page:

<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>

Using firefox console document.querySelector('.play-btn').click(); works fine, but on runtime i get:

Uncaught TypeError: document.querySelector(...) is null

Any ideas or best ways?

Thanks, Red

RedVelvet
  • 1,683
  • 3
  • 15
  • 24
  • 2
    Are you trying to querySelect a button that is inside the iframe? – JakeAve Feb 18 '22 at 16:20
  • Please try to add an id to iframe element and then use that id to trigger the play button click:
    – Roby Raju Oommen Feb 18 '22 at 17:17
  • @JakeAve yes is it, is inside the iframe – RedVelvet Feb 18 '22 at 23:03
  • 2
    I don't think this is possible for two reasons 1) You [can't access](https://stackoverflow.com/q/9393532/15273968) iframe contents from other domain. 2) Browsers [don't allow audio autoplay](https://developer.chrome.com/blog/autoplay/) before certain conditions are met, certainly not on document onload. – the Hutt Feb 21 '22 at 05:38
  • @RedVelvet, please, view this topic: [Trigger a button click inside an iframe](https://stackoverflow.com/questions/27332339/trigger-a-button-click-inside-an-iframe). I think this will answer your question. – Antonio Leonardo Feb 27 '22 at 15:30

3 Answers3

1

You can do whatever you want in the console but you would only be able to access iframe content programmatically if your iframe domain matches your current domain.

That being said, you can:

Select the iframe, then run query selector on the iframe (you don't even need jQuery for it):

const iframeElement = document.querySelector('iframe'); 
iframeElement.querySelector('.play-btn').click();

Tips:

  1. You can also play the video/music directly by calling play() on the media elements. So you can cut out stimulating click on the button.

  2. querySelector is slower than getElementById, you can assign an id attribute to your iframe/button/media element and find it directly.

    It will also help you avoid bugs because querySelector returns the first match. So in case you have multiple iframe or multiple elements with the class .play-btn, it can lead to unexpected behaviour.

Hackinet
  • 3,252
  • 1
  • 10
  • 22
0

you should select iframe at first and get its content window to access all elements on it.

const myIframe = document.querySelector('#iframe_id')
const myIframeDocument =myIframe.contentWindow.document
const myElement = myIframeDocument.body.querySelector('#target_element')

it is noticeable that the iframe should be loaded completely before your process and also domain conflict

Ali Katiraei
  • 84
  • 1
  • 7
0

Hope this helps:

   <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>

I found this on Grepper, but it was from another Stack Overflow post. If that doesn't help I found a different post that seems to be more related to the error.

Speedy
  • 13
  • 3