how to modify html using javascript after the page loads

Question

I am new to js and learning how to modify html using js ,i want to modify:

<video controls="" controlslist="download" src="//storage.googleapis.com/media-session/caminandes/short.mp4#t=80">&lt;</video>

To...

<video controls="" controlslist="nodownload" src="//storage.googleapis.com/media-session/caminandes/short.mp4#t=80">&lt; </video>

After the page loads, i want to change controlslist="download" to controlslist="nodownload"

page src:https://googlechrome.github.io/samples/media/controlslist.html

Dipak Telangre · Accepted Answer · 2020-05-11 05:38:29Z

-1

Use onload event like below

window.onload = function() {

    // select your expected video tag 
    // change attribute controlslist value to expected one 

}

Full Code:

window.onload = function() {
    // select your expected video tag 
    // change attribute controlslist value to expected one 
    var searchString = "t=80";
    var videos = document.getElementsByTagName("video");
    for (let item of videos) {
        if (item.getAttribute("src").includes(searchString)) {
            item.setAttribute("controlslist", "Anything I want")
        }
    }
}

edited May 11, 2020 at 5:38

answered May 11, 2020 at 5:21

Dipak Telangre

2,0134 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

elite Over a year ago

as you can see at src there are multiple elements so i can't choose src so can you please post the modified code src::googlechrome.github.io/samples/media/controlslist.html

Dipak Telangre Over a year ago

@elite Thanks for your explanation, Added full code. Don't forget to upvote and accept the answer.

Collectives™ on Stack Overflow

how to modify html using javascript after the page loads

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related