@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") });
    });
});
  • Вопрос задан
  • 71 просмотр
Пригласить эксперта
Ответы на вопрос 1
lookreciuspin
@lookreciuspin
Data recovery and truth revelation hacker
Когда ты ловишь "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") });
        }
    });
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы