Jak ovládat videopřehrávač YouTube pomocí JavaScriptu

YouTube se stal standardním způsobem poskytování vysoce kvalitních videí na webu. Někdy, když vložíte video do své webové aplikace nebo vstupní stránky, potřebujete velkou kontrolu nad tím, co a jak se zobrazí. To je důvod, proč vám ukážeme, jak můžete používat rozhraní YouTube JavaScript Player API.

Inicializace přehrávače

Prvním krokem je přidat zástupný symbol pro přehrávač a zahrnout rozhraní YouTube API.

<div id="video-placeholder"></div>

<script src="https://www.youtube.com/iframe_api"></script>

Když je rozhraní API plně načteno, hledá globální funkci nazvanou onYouTubeIframeAPIReady() které byste měli definovat. Uvnitř vytvoříme novou instanci přehrávače YouTube. První argument je id prvku HTML, který chceme nahradit přehrávačem, v našem případě je to video-placeholder . Druhým je objekt obsahující možnosti hráče:

• Šířka a výška přehrávače. Ty lze přepsat použitím CSS na #video-placeholder.
• ID videa, které chceme vložit při načtení přehrávače. Toto ID můžete získat z libovolného odkazu YouTube tak, že převezmete řetězec za ?v=(např. youtube.com/watch?v=WwoKkq685Hk )
• Položka playerVars objekt je sada parametrů. Změnili jsme barvu přehrávače na bílou a vytvořili jsme seznam videí poskytnutím dvou dalších ID videí oddělených čárkou. Zde si můžete prohlédnout seznam všech dostupných nemovitostí.
• události objekt se skládá z posluchačů událostí a funkcí, které volají. Rozhraní API předává událost objekt jako jediný atribut obsahující cíl a data. Více o akcích si můžete přečíst zde.

Celý kód vypadá nějak takto:

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-placeholder', {
        width: 600,
        height: 400,
        videoId: 'Xa0Q0J5tOP0',
        playerVars: {
            color: 'white',
            playlist: 'taJ60kskkns,FG0fTKAqZ5g'
        },
        events: {
            onReady: initialize
        }
    });
}

initialize() funkce bude volána, když se přehrávač plně načte. Spustí se interval a každou sekundu aktualizuje některé z našich ovládacích prvků.

function initialize(){

    // Update the controls on load
    updateTimerDisplay();
    updateProgressBar();

    // Clear any old interval.
    clearInterval(time_update_interval);

    // Start interval to update elapsed time display and
    // the elapsed part of the progress bar every second.
    time_update_interval = setInterval(function () {
        updateTimerDisplay();
        updateProgressBar();
    }, 1000)

}

Zobrazení aktuálního času a délky videa

To se provádí pomocí updateTimerDisplay() , jedna z funkcí volaná každou sekundu. Využívá metod API, aby nám poskytl adekvátní informace o délce videa.

// This function is called by initialize()
function updateTimerDisplay(){
    // Update current time text display.
    $('#current-time').text(formatTime( player.getCurrentTime() ));
    $('#duration').text(formatTime( player.getDuration() ));
}

function formatTime(time){
    time = Math.round(time);

    var minutes = Math.floor(time / 60),
    seconds = time - minutes * 60;

    seconds = seconds < 10 ? '0' + seconds : seconds;

    return minutes + ":" + seconds;
}

Metody se volají pomocí přehrávače objekt, který jsme vytvořili v žebrání. Pomocí getCurrentTime() můžeme zjistit, kolik sekund ve videu se nacházíme a celkovou dobu trvání videa s getDuration() . Obě funkce vrátí sekundu, kterou správně naformátujeme, aby vypadala jako čas, a poté zapíšeme do DOM.

Ukazatel průběhu

To se provádí pomocí player.seekTo(sec) funkce, která přeskočí video na sekundy uvedené v parametru.

Abychom to demonstrovali, vytvořili jsme vlastní verzi ukazatele průběhu YouTube pomocí vstupního pole rozsahu typů. Když na něj klikneme kamkoli, vezmeme vstupní hodnotu, která nám dá procenta. Toto procento pak použijeme k výpočtu, jaký pokrok chceme u videa dosáhnout, a přeskočíme na příslušné sekundy.

$('#progress-bar').on('mouseup touchend', function (e) {

    // Calculate the new time for the video.
    // new time in seconds = total duration in seconds * ( value of range input / 100 )
    var newTime = player.getDuration() * (e.target.value / 100);

    // Skip video to new time.
    player.seekTo(newTime);

});

Výše uvedený kód nám umožňuje ovládat video, ale také chceme, aby se ukazatel průběhu automaticky pohyboval s postupem videa. Chcete-li pochopit, jak to děláme, vraťte se k initialize() funkce a konkrétněji její interval každé sekundy a updateProgressBar() .

// This function is called by initialize()
function updateProgressBar(){
    // Update the value of our progress bar accordingly.
    $('#progress-bar').val((player.getCurrentTime() / player.getDuration()) * 100);
}

Ovládací prvky přehrávání

Tady nic neobvyklého. Stačí vytvořit dvě tlačítka a kliknutím zavolat potřebnou metodu.

$('#play').on('click', function () {
    player.playVideo();
});

$('#pause').on('click', function () {
    player.pauseVideo();
});

Možnosti zvuku

Můžeme vytvořit přepínací tlačítko ztlumení pomocí poskytnutých metod získávání a nastavení přehrávače.

$('#mute-toggle').on('click', function() {
    var mute_toggle = $(this);

    if(player.isMuted()){
        player.unMute();
        mute_toggle.text('volume_up');
    }
    else{
        player.mute();
        mute_toggle.text('volume_off');
    }
});

Pokud chceme nastavit hlasitost pomocí procent, můžeme použít číselné vstupní pole a setVolume() metoda. Automaticky ověří zadaný parametr, takže se nemusíme starat o předávání plovoucích hodnot nebo čísel mimo interval [0 :100].

$('#volume-input').on('change', function () {
    player.setVolume($(this).val());
});

Další nastavení přehrávače

Změna rychlosti přehrávání

player.setPlaybackRate() metoda očekává jako svůj parametr jednu z následujících možností:

• 0,25
• 0,5
• 1
• 1,5
• 2

Vytvořte <select> prvek v HTML a nastavte rychlosti jako <option> děti. Uživatelská interakce s výběrem povede ke změně rychlosti pouze pro aktuálně přehrávané video a při spuštění dalšího videa bude resetováno na výchozí (rychlost 1).

$('#speed').on('change', function () {
    player.setPlaybackRate($(this).val());
});

Změna kvality videa

Změna kvality videa funguje velmi podobným způsobem jako změna rychlosti. Metoda je setPlaybackQuality() a argument, který očekává, je jeden z těchto řetězců:

• vysoce
• hd1080
• hd720
• velký
• střední
• malé

Všimněte si, že tato funkce pouze navrhuje, jaká kvalita by měla být použita, protože velmi závisí na internetovém připojení a videu samotném.

$('#quality').on('change', function () {
    player.setPlaybackQuality($(this).val());
});

Seznamy skladeb

Pomocí těchto metod z API můžeme přehrát další nebo předchozí video v seznamu videí.

$('#next').on('click', function () {
    player.nextVideo()
});

$('#prev').on('click', function () {
    player.previousVideo()
});

Pokud chcete přehrát konkrétní video ze seznamu videí, použijte player.playVideoAt(index) , kde index je celé číslo určující, které video se má přehrát, přičemž 0 je první.

Zařaďte video do fronty dynamicky

Poslední věc, kterou si ukážeme, je, jak dynamicky přidávat nová videa do přehrávače. Pokud se podíváte na naše demo, ve spodní části uvidíte tři miniatury videí s kočkami. Přidali jsme jejich odkazy na YouTube jako datové atributy a když na některý z nich někdo klikne, vybrané video se načte do přehrávače.

$('.thumbnail').on('click', function () {

    var url = $(this).attr('data-video-id');

    player.cueVideoById(url);

});

Závěr

Tímto náš tutoriál uzavíráme! Doufáme, že pro vás byl tento návod užitečný. Pokud se chcete dozvědět více o YouTube API, podívejte se na tyto zdroje:

• Reference rozhraní YouTube Iframe Player API – zde.
• Parametry podporované přehrávačem YouTube – zde.
• YouTube Developers Live:Přizpůsobení integrovaného webového přehrávače – zde.