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!

Solution 1

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.

Solution 2

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.

Solution 3

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);
    }
}
})

Comments

[user7637745]

Check out this article about HTML5 Video Element with jQuery, short, right-to-the-point, tasty.

[eisbehr]

Does this answer your question? Why is my 'load' event/function not beeing executed after switching to jQuery 3?