Как убрать зацикливание при включении видео?

Question

[KitCat12]

Я использую playerjs в качетсве плеера. Сервер у меня создает комнаты с пользователями. Я хочу чтобы плеер автоматически запускался / останавливался / перематывался у всех пользователей, когда это сделает кто-то из них.

Паузу, запуск и перемотку я реализовал, но есть проблема - при запуске оно зацикливается и получается вызывает ивент play по кругу, из-за чего видео запускается и останавливается много раз подряд. Как это можно исправить?

Вот код который сейчас использую:

$(document).ready(function() {
    var socketio = io();

    let player = new Playerjs({
        id: "player",
        file: JSON.parse($("#player").attr("data-links"))
    });

    const playerFrame = $("#player"),
          messagesBox = $(".chat-box .messages"),
          messagesScroll = $(".chat-box"),
          chatInputs = $(".chat-inputs");

    socketio.on("play", (data) => {
        if (!player.api("playing")) {
            player.api("play");
        }
        player.api("seek", data.time);
    });

    socketio.on("pause", (data) => {
        if (player.api("playing")) {
            player.api("pause");
        }
    });

    socketio.on("seek", (data) => {
        player.api("seek", data.time);
    });

    playerFrame.on("play", (event) => {
        console.log(event.type)
        socketio.emit("play", { time: player.api("time") });
    });

    playerFrame.on("pause", (event) => {
        console.log(event.type)
        socketio.emit("pause", {});
    });

    playerFrame.on("seek", (event) => {
        console.log(event.type)
        socketio.emit("seek", { time: player.api("time") });
    });
});

Answer 1

[Br0k3n C1rcu1t]

Когда ты ловишь "play" событие от сокета, ты вызываешь метод play() на своем плеере. Это побуждает плеер кинуть событие "play", которое ты тоже ловишь и отправляешь обратно на сервер. В итоге это зацикливается и бесконечно продолжается.

Но это можно пофиксить. Введи какой-нибудь флаг, который будет показывать, вызван ли метод play() (или другие) твоим кодом или же пользователем. Потом этот флаг ты будешь проверять перед тем, как отправить событие на сервер.

$(document).ready(function() {
    var socketio = io();

    let player = new Playerjs({
        id: "player",
        file: JSON.parse($("#player").attr("data-links"))
    });

    const playerFrame = $("#player"),
          messagesBox = $(".chat-box .messages"),
          messagesScroll = $(".chat-box"),
          chatInputs = $(".chat-inputs");

    let isApiCall = false; // флаг для отслеживания источника вызова

    socketio.on("play", (data) => {
        if (!player.api("playing")) {
            isApiCall = true; // устанавливаем флаг, что это вызов через API
            player.api("play");
            isApiCall = false; // сбрасываем флаг
        }
        player.api("seek", data.time);
    });

    socketio.on("pause", (data) => {
        if (player.api("playing")) {
            isApiCall = true; // устанавливаем флаг, что это вызов через API
            player.api("pause");
            isApiCall = false; // сбрасываем флаг
        }
    });

    socketio.on("seek", (data) => {
        isApiCall = true; // устанавливаем флаг, что это вызов через API
        player.api("seek", data.time);
        isApiCall = false; // сбрасываем флаг
    });

    playerFrame.on("play", (event) => {
        console.log(event.type)
        if(!isApiCall){ // отправляем событие только если это не вызов через API
            socketio.emit("play", { time: player.api("time") });
        }
    });

    playerFrame.on("pause", (event) => {
        console.log(event.type)
        if(!isApiCall){ // отправляем событие только если это не вызов через API
            socketio.emit("pause", {});
        }
    });

    playerFrame.on("seek", (event) => {
        console.log(event.type)
        if(!isApiCall){ // отправляем событие только если это не вызов через API
            socketio.emit("seek", { time: player.api("time") });
        }
    });
});

Comments

[scoffs]

ты код не весь скопировал

[KitCat12]

Похоже что при вызове play через api оно в подальшем не отсылает ивент, так как флаг ни разу не стал true, сколько бы я не запускал / останавливал плеер

[Br0k3n C1rcu1t]

Соррян за путаницу, но к сожалению, работа с библиотеками вроде Player.js может быть иногда сложной из-за особенностей их внутренней работы. В данном случае, кажется, что события "play", "pause" и "seek", которые ты слушаешь, не срабатывают при вызове соответствующих методов через API. Это может быть связано с тем, как эти события реализованы внутри Player.js.

Если это так, то одним из возможных решений может быть использование дополнительных флагов для каждого из событий, чтобы отслеживать их вручную. Ты можешь установить флаг в true перед вызовом метода API, а затем сбросить его обратно в false после вызова. Затем, при получении события, можно проверить значение флага и, если оно равно true, игнорировать событие.

$(document).ready(function() {
    var socketio = io();

    let player = new Playerjs({
        id: "player",
        file: JSON.parse($("#player").attr("data-links"))
    });

    const playerFrame = $("#player"),
          messagesBox = $(".chat-box .messages"),
          messagesScroll = $(".chat-box"),
          chatInputs = $(".chat-inputs");

    let isPlayApiCall = false,
        isPauseApiCall = false,
        isSeekApiCall = false; // вводим отдельные флаги для каждого события

    socketio.on("play", (data) => {
        if (!player.api("playing")) {
            isPlayApiCall = true; // ставим флаг, что это вызов через API
            player.api("play");
            isPlayApiCall = false; // сбрасываем флаг
        }
        isSeekApiCall = true; // ставим флаг, что это вызов через API
        player.api("seek", data.time);
        isSeekApiCall = false; // сбрасываем флаг
    });

    socketio.on("pause", (data) => {
        if (player.api("playing")) {
            isPauseApiCall = true; // ставим флаг, что это вызов через API
            player.api("pause");
            isPauseApiCall = false; // сбрасываем флаг
        }
    });

    socketio.on("seek", (data) => {
        isSeekApiCall = true; // ставим флаг, что это вызов через API
        player.api("seek", data.time);
        isSeekApiCall = false; // сбрасываем флаг
    });

    playerFrame.on("play", (event) => {
        console.log(event.type)
        if(!isPlayApiCall){ // отправляем событие, только если это не вызов через API
            socketio.emit("play", { time: player.api("time") });
        }
    });

    playerFrame.on("pause", (event) => {
        console.log(event.type)
        if(!isPauseApiCall){ // отправляем событие, только если это не вызов через API
            socketio.emit("pause", {});
        }
    });

    playerFrame.on("seek", (event) => {
        console.log(event.type)
        if(!isSeekApiCall){ // отправляем событие, только если это не вызов через API
            socketio.emit("seek", { time: player.api("time") });
        }
    });
});

Надеюсь, этот подход решит твою проблему. Если всё равно что-то идет не так, то возможно стоит проверить документацию Player.js