javascripthtmlhtml5-videoweb-inspectorweb-scripting

how to modify html using javascript after the page loads


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


Solution

  • 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")
            }
        }
    }