Dynamically replace HTML5 tags using Javascript

Question

I have very little understanding of how Adobe Captivate generates it's content, but it dynamically generates html code on the go using javascript. I would like to add a section of Javascript code to the main html page that constantly checks for this line:

<video src="vr/Vi1.mp4" style="display: block; left: 0px; top: 0px; width: 1280px; height: 664px;"></video>

and replaces it with a video tag of my choosing.

The problem with most "Replace scripts" that I have researched so far is that they only execute as soon as the page is opened, but since the code is generated dynamically and the tag could appear at any given moment, I need something that checks the page every time content is changed.

Any help will be appreciated! Regards

Answer 1

What you need is to detect when an element is added to a page, specifically <video> element. There is a DOM event for that, but it's been deprecated - see this answer . The answer may be helpful to you, the accepted answer suggests setInterval() .

Try this:

function checkVideo() {
    var videoTags = document.getElementsByTagName("video");
    if (videoTags.length > 0) {
        // do something with video
    }
    setTimeout( checkDOMChange, 1000); // schedule the next check

}

Then just run checkVideo() when document is loaded (eg $(document).ready(checkVideo) with jQuery).

jQuery also has a function live() which should solve your problem, but it is deprecated now.