代码之家 › 专栏 › 技术社区 › GalgÃ³czi Levente

如何在jquery-3.3.1中调用$(window).on(“加载”,函数)?

onload jquery javascript

GalgÃ³czi Levente · 技术社区 · 6 年前

我刚刚开始使用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>

已解决:问题源自此,我使用此 window.onload = function() 在…之前 $(document).ready(function() ……抱歉,伙计们,我非常精通JavaScript,刚刚学习了这门语言的基础知识。现在解决所有问题,非常感谢您的回复!

3 回复 | 直到 6 年前

baao 6 年前

由于除了等待加载文档外,您没有使用jquery,因此只需将其替换为普通的JS即可。

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

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

user7637745 Alaa 6 年前

使用 $(文档).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 .

Will Jones 6 年前

而不是使用 $(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);
    }
}
})