如何在 jQuery-3.3.1 中调用 $(window).on("load", function)？

Question

我刚刚开始使用 jquery-3.3.1 和我的 onload();功能不再起作用。我知道这是更新的，所以我将window.onload = function(e) 更改为$(window).on("load", function (e)，但没有工作......这段代码有什么问题？现在怎么调用加载函数？

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

这是我的html：

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

已解决：问题出在这个问题上，我在（或？）$(document).ready(function() 之前使用了这个window.onload = function() ...对不起，伙计们，我非常擅长javascript，刚刚学习了这种语言的基础知识。现在可以使用您的所有解决方案，非常感谢您的所有回复！

Answer 1

由于除了等待加载文档之外您没有使用 jQuery，因此只需将其替换为纯 js

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

请注意，许多浏览器（例如 Safari）会阻止视频自动播放。一旦其他浏览器也采用这一点，您的代码将不再工作。

Answer 2

使用 $(document).ready() 代替 $(window).on("load", function...

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

或它的简写：

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

你的情况是：

$(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. 也可以查看 how to handle Video Element Events using jQuery。

Answer 3

不要使用$(window).on("load")...，而是使用$(document).ready(function)

另外，值得注意的是，现在很多浏览器都禁用了自动播放，所以要小心那个。

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