Have an image that plays video onmouseover. Goes to poster image onmouseout. The only problem is it doesn't show the poster image when the page first loads, it shows the video(not playing, just image of video start screen). Everything else works just fine, I just want the poster image to be showing when the page first loads. I'm not the best with script so not sure what else to try. Any and all help is appreciated.

<video poster="myimage.png" src=myvideo.mp4 class="myvideo" controls="" loop="" 
 width="auto" height="300" alt="" ></video>

$(document).ready(function() {
$(".myvideo").on("mouseover", function(event) {
    $(this).get(0).play();
  
  }).on('mouseout', function(event) {
    this.load();
  });
})

 {
  let d = new Date();
  text.value += `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()} | ${event.type} [target: ${event.target.id}]\n`.replace(/(:|^)(\d\D)/, '$10$2');
  text.scrollTop = text.scrollHeight;
}