Control YouTube's Video Player with JavaScript

Initializing the player

<div id="video-placeholder"></div>
<script src="https://www.youtube.com/iframe_api"></script>

ต่อมา เราจะสร้างฟังก์ชัน ภายในจะมี youtube player อยู่ argument แรก เราจะใส่ Id ของ HTML element ที่เราจะใส่ตัว player ลงไป ของเราก็จะใส่คำว่า video-placeholder ต่อมาจะเป็น object ที่เก็บข้อมูลของ player
    - ขนาดของตัว player
    - id ของ video ที่ได้จากลิ้งค์ youtube เป็นรหัสที่อยู่ข้างหลัง "?v=" (https://www.youtube.com/watch?v=TslY0Tg1O5s)
    - PlayerVars objectใช้เก็บ available properties จาก โค้ดเราใส่ใช้กำหนด สี กับ playlist
    - events object ประกอบด้วย listener และ function API จะส่ง event object เป็น attribute ทีมี target กับ data อยู่

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() จะมีถูกเรียกใช้เมื่อ player โหลดมาเต็มแล้ว มันจะเริ่ม update เรื่อยๆตามวินาที

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)


}

Displaying current time and video duration

    updateTimerDisplay() ใช้บอกถึงความยาวของวิดีโอ Method จะถูกเรียกใช้โดย player object เราสามารถดึงค่าวิดีโอที่เล่นไปปแล้วจาก getCurrentTime() และคสามยาวของวิดีโอจะได้จาก
     
// 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;

}

Progress Bar

    เราใช้ player.seekTo(sec) ในการไปยังจุดที่เราต้องการเล่น video

$('#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);


});

Playback Controls

ใช้ควบคุมเพื่อเลือกเพลงถัดไป หรือเพลงก่อนหน้า

    $('#play').on('click', function () {

       player.playVideo();

    });

    $('#pause').on('click', function () {

        player.pauseVideo();

    });

Sound Options

$('#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');
    }

});

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

});

Changing Playback Speed

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

});

Changing Video Quality

    ทำให้สามารถเปลี่ยนคูณภาพวิดีโอได้

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

Playlists

    ทำให้สามารถดูวิดีโอถัดไป และวิดีโอก่อนหน้าได้

$('#next').on('click', function () {

    player.nextVideo()

});

$('#prev').on('click', function () {

    player.previousVideo()

});