How to call $(window).on("load", function) in jQuery-3.3.1?

Question

I just now started using jquery-3.3.1, and my onload(); function not working anymore. I know this is updated, so I changed the window.onload = function(e) to $(window).on("load", function (e), but not working... Whats the wrong with this code? How can I call the load function now?

$(window).on("load", function (e) {
    var videoSource = new Array();

     videoSource[0] = 'video1.mp4';
     videoSource[1] = 'video2.mp4';

var i = 1; // define i
var videoCount = videoSource.length;

function videoPlay(videoNum) {
document.getElementById("myVideo").setAttribute("src", videoSource[videoNum]);
document.getElementById("myVideo").load();
document.getElementById("myVideo").play();
}
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
videoPlay(0); // play the video

function myHandler() {
    i++;
    if (i == (videoCount - 1)) {
        i = -1;
        videoPlay(0);
    } else {
        i = 0;
        videoPlay(1);
    }
}
})

and this is my html:

<video playsinline autoplay muted id="myVideo" type="video/mp4" onload="onload();" poster="poster.png"></video>

SOLVED: the problem originate from that, I use this window.onload = function() before an (or the?) $(document).ready(function() ... Sorry guys, I am very in javascript, just now learning the basics of this language. Now works the all your solutions, thank you very much all your replies!

Check out [this article about HTML5 Video Element with jQuery](http://www.inwebson.com/html5/custom-html5-video-controls-with-jquery/), **short, right-to-the-point, tasty**. — user7637745, Jun 11 '18 at 18:52
Does this answer your question? [Why is my 'load' event/function not beeing executed after switching to jQuery 3?](https://stackoverflow.com/questions/38585373/why-is-my-load-event-function-not-beeing-executed-after-switching-to-jquery-3) — eisbehr, Dec 11 '19 at 11:05

score 4 · Accepted Answer · answered Jun 11 '18 at 18:14

Since you're not using jQuery except for waiting for the document to be loaded, simply replace also this with plain js

window.onload = function() {
    // let's go!
}

Note that many browsers, like safari, block autoplaying of video. Once the other browsers adopt this too your code won't work anymore.

user7637745 · Answer 2 · 2018-06-11T18:33:22.257

Use $(document).ready() instead of $(window).on("load", function...

$(document).ready(function() {
    console.log("ready!");
});

OR its shorthand:

$(function() {
    console.log("ready!");
});

In your case would be:

$(function() {
    var videoSource = new Array();

    videoSource[0] = 'video1.mp4';
    videoSource[1] = 'video2.mp4';

    var i = 1; // define i
    var videoCount = videoSource.length;

    function videoPlay(videoNum) {
        document.getElementById("myVideo").setAttribute("src", 
        videoSource[videoNum]);
        document.getElementById("myVideo").load();
        document.getElementById("myVideo").play();
    }

    document.getElementById('myVideo').addEventListener('ended', myHandler, false);
    videoPlay(0); // play the video

    function myHandler() {
        i++;
        if (i == (videoCount - 1)) {
            i = -1;
            videoPlay(0);
        } else {
            i = 0;
            videoPlay(1);
        }
    }
})

More on this subject. Also checkout how to handle Video Element Events using jQuery.

score 1 · Answer 3 · answered Jun 11 '18 at 18:13

Instead of using $(window).on("load")..., use $(document).ready(function) instead

Also, it's worth noting that a lot of browsers are disabling autoplay now so watch out for that one.

$(document).ready(function (e) {
    var videoSource = new Array();

     videoSource[0] = 'video1.mp4';
     videoSource[1] = 'video2.mp4';

var i = 1; // define i
var videoCount = videoSource.length;

function videoPlay(videoNum) {
document.getElementById("myVideo").setAttribute("src", videoSource[videoNum]);
document.getElementById("myVideo").load();
document.getElementById("myVideo").play();
}
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
videoPlay(0); // play the video

function myHandler() {
    i++;
    if (i == (videoCount - 1)) {
        i = -1;
        videoPlay(0);
    } else {
        i = 0;
        videoPlay(1);
    }
}
})

How to call $(window).on("load", function) in jQuery-3.3.1?

3 Answers3