Why can't I get the element?

Viewed 220

For example, the following site https://news.yahoo.co.jp/ I tried to automatically click a feature that is muted by default in the video part of, but I can't.

window.onload = function(e) {
document.getElementsByClassName("vjs-mute-control.vjs-vol-0").click();
}
// Or
window.onload = function(e) {
$('#player > div.vjs-control-bar > div.vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal > button').click();
};

In such cases, it is not limited to the above sites, but it is often seen, Is there anything I can do with front-end scripts?

My number one goal this year was to get elements that I couldn't get.

You can't do anything on your own.

If the frontend JS didn't help, why?

Operating environment Windows 10 Chrome 64bit https://chrome.google.com/webstore/detail/css-and-javascript-inject/ckddknfdmcemedlmmebildepcmneakaa

2 Answers

My assumption is that the element is dynamically rendered and it is not present on the page when you are trying to click on it. Try delegating the event to closest static parent:

window.onload = function(e) {
    $(document).on("ready", ".vjs-mute-control.vjs-vol-0", function(){
        $(this).click();
    });
};

There is a property defaultMuted which you can use to set audio or video muted by default. https://www.w3schools.com/tags/av_prop_defaultmuted.asp

HTML Code :

<video id="video_a" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
</video>

JavaScript Code :

window.onload = function(e) {
    var videoElement = document.getElementById('video_a');
    videoElement.defaultMuted = true; 
} 
 
Related