javascript not executed with setTimeout but does with button click event

Question

I am trying to view a video stream from an IP camera in a web page, when the stream can be played I want it to start automatically. Trying to do that with a timer, try to play and if that fails, try again.

The timer (timeout) doesn't seem to do that, however if I execute the script using a button, it does. What am I missing?

see the code below.

thanks,

Ron

PS: I commented out the setTimeout functions, to make the button work.

    <!DOCTYPE html>
    <html>
    <body>
    <script  type="text/javascript">

    function playVid() {
    var videoElem = document.getElementById("IPcamerastream"); 
    var playPromise = videoElem.play();

    // In browsers that don’t yet support this functionality playPromise won’t be defined.
    if (playPromise !== undefined) {
       playPromise.then(function() {
         // Automatic playback started!
         videoElem.controls = true;
          }).catch(function(error) {
          // Automatic playback failed.
    //      setTimeout(playVid, 1000);
          });
       }
    }

    //setTimeout(playVid, 1000);
    </script>
    <button onclick="playVid()" type="button">Play Video</button><BR>
    <video id="IPcamerastream" src="http://192.168.2.8:8080" width="960" height="540"></video>
    </body>
    </html>

score 0 · Answer 1 · answered Jun 02 '19 at 23:22

0

Look into the features of the video html5 tag:(https://www.w3schools.com/tags/tag_video.asp)

one of the optional attributes is autoplay (Specifies that the video will start playing as soon as it is ready) so there is no need to set timeout.

<video id="IPcamerastream" src="http://192.168.2.8:8080" width="960" height="540" autoplay></video>

answered Jun 02 '19 at 23:22

user2950720

931
2
10
26

It's useful to mention that in some browsers (e.g. Chrome 70.0) autoplay is not working if no muted attribute is present. Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Attributes – Marcus Parsons Jun 02 '19 at 23:52
I tried adding the autoplay, as well as displaying the controls. That doesn't seem to make a difference. – Ron Jun 04 '19 at 01:24

score 0 · Answer 2 · answered Jun 02 '19 at 23:23

0

Move your script below the video element, and you should not need the timeout at all, because the element will already be initialized when the script is executed. So document.getElementById should resolve the element right away.

Using timers will introduce race conditions. If anything, you should add a listener to the DOMContentLoaded event.

answered Jun 02 '19 at 23:23

Olaf Tietze

31
4

thank you, I think though that what is happening is that the stream is not ready to be played yet or, I am wondering if the scope is different , comparing the timer scope with pressing the button. The content seems to be loaded. If there were a race conditiion, it would between me requesting to play it, but I keep repeating that with a pause? – Ron Jun 04 '19 at 01:24

score 0 · Answer 3 · answered Jun 02 '19 at 23:44

0

Welcome Ron,

This is a well formatted question, but target browser info could also assist in helping you resolve your issue. Please consider adding it in future!

As for your problem, you tell us that you wish the video to autoplay, I'm assuming on page load?

I've also removed the duplicate source paste.

In this case, you only call playVid() from within the promise erroring out. The initial call is bound to the button click event.

In short, only clicking the button will initiate the playVid() function.

You need to add an event listener for DOM readiness and call playVid() within that. Otherwise, it's only being called when you click your button!


document.addEventListener('DOMContentLoaded', (event) => {
    //the event occurred
    playVid();
});

You can also use the autoplay HTML option in the video tag. lang-html <video {...} autoplay />

answered Jun 02 '19 at 23:44

Tech1337

1,557
13
16

1

It's useful to mention that in some browsers (e.g. Chrome 70.0) autoplay is not working if no muted attribute is present. Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Attributes – Marcus Parsons Jun 02 '19 at 23:52
1

Indeed, should you need more info @Ron, check this question: https://stackoverflow.com/q/49939436/2760123 for some answers related to autoplay errors. – Tech1337 Jun 02 '19 at 23:59
Thank you for your kind answer. (the double code paste was because I never posted here, and something went wrong when I did.) – Ron Jun 04 '19 at 01:25
Somehow I couldn't finish this request/comment. I wonder if the videoElem.play() is event driven, and me forcing a timer event causes there to be two sciopes and the timer scope never gets to see the "play promise" ? – Ron Jun 04 '19 at 01:33

score 0 · Answer 4 · answered Aug 20 '22 at 10:58

0

I had an almost similar problem ، when I received the video stream in a webrtc project, the video would not be displayed without clicking a button.

if you want to play automatically received stream video, you should add "muted" in the video tag.

answered Aug 20 '22 at 10:58

ICIC

1
2

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 24 '22 at 09:42

javascript not executed with setTimeout but does with button click event

4 Answers4