Как вызвать $ (window) .on («загрузка», функция) в jQuery-3.3.1? - PullRequest
Новая
       10

Как вызвать $ (window) .on («загрузка», функция) в jQuery-3.3.1?

0 голосов
/ 11 июня 2018

Я только сейчас начал использовать 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 ]

0 голосов
/ 11 июня 2018

Вместо использования $(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);
    }
}
})
0 голосов
/ 11 июня 2018

Поскольку вы не используете jQuery, за исключением ожидания загрузки документа, просто замените его на обычный js 

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

Обратите внимание, что многие браузеры, такие как safari, блокируют автоматическое воспроизведение видео.Как только другие браузеры примут это, ваш код больше не будет работать.

0 голосов
/ 11 июня 2018

Используйте $ (документ) .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);
        }
    }
})

Подробнее по этому вопросу. Также оформить заказ как обращатьсяСобытия видеоэлемента с использованием jQuery .

...