Как объединить несколько похожих функций в одну? - PullRequest
0 голосов
/ 26 мая 2018

Я застрял на фрагменте кода JavaScript, который применяет событие к API YouTube.Цель состоит в том, чтобы при нажатии на соответствующую кнопку видео перемещалось назад на 5 с, 10 с или 30 с или продвигалось на 5 с, 10 с или 30 с.

Моя проблема в том, что у меня шесть одинаковых функций, ноимеют одинаковые значения времени.(в этом примере я поместил только две функции: rewind5() для резервного копирования 5 секунд и rewind10() для резервного копирования 10 секунд).

Я ищу благотворительную душу, которая могла бы помочь мне объединитьэти две функции (rewind5() и rewind10()) в одну функцию.Когда у меня будет правильная структура, я смогу создать четыре другие функции, используя одну функцию.

Мой файл JS:

// Rewind 5s

function onPlayerReady(event){
    if(player.getPlayerState()===1 || player.getPlayerState()===2){
        $('#s5back').prop('disabled', false);
        $( '#s5back' ).click(function() {
            rewind5();
            });
    } else {
        $('#s5back').prop('disabled', true);
    }
}

function rewind5() {
    var currentTime = player.getCurrentTime();
    player.seekTo(currentTime - 5, true);
    player.playVideo();

};

// Rewind 10s

function onPlayerReady(event){
    if(player.getPlayerState()===1 || player.getPlayerState()===2){
        $('#s10back').prop('disabled', false);
        $( '#s10back' ).click(function() {
            rewind10();
            });
    } else {
        $('#s10back').prop('disabled', true);
    }
}

function rewind10(){
    var currentTime = player.getCurrentTime();
    player.seekTo(currentTime - 10, true);
    player.playVideo();
};

Мой файл HTML:

<div id="video-placeholder"></div>
<script type="text/javascript">
var player,
time_update_interval = 0;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-placeholder', {
        width: '100%',
        height: '625px',
        videoId: 'ID URL YOUTUBE',
        playerVars: {
            color: 'white',
            controls: 0,
            rel: 0,
            showinfo: 0
        },
        events: {
            onReady: initialize,
            onStateChange: onPlayerReady
        }
    });
}
</script>

1 Ответ

0 голосов
/ 26 мая 2018

Почему бы не иметь только одну функцию seekBy и передать ей нужное количество секунд для перемотки?

function seekBy(secs){
  var currentTime = player.getCurrentTime();
  player.seekTo(currentTime + secs, true);
  player.playVideo();
}

и реализовать ее, например,

$('#s10back').click(function() {
  seekBy(-10);
});

или 5 секунд, или 30, или 60. Для продвижения вперед введите вместо него положительное число:

$('#s10forward').click(function() {
  seekBy(10);
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...