JavaScript >> Javascript 文檔 >  >> JavaScript

如何使用 JavaScript 控制 YouTube 的視頻播放器

YouTube 已成為在網絡上提供高質量視頻的標準方式。有時,當您在 Web 應用程序或登錄頁面中嵌入視頻時,您需要對顯示的內容和方式進行大量控制。這就是為什麼我們要向您展示如何使用 YouTube JavaScript Player API。

初始化播放器

第一步是為播放器添加一個佔位符並包含 YouTube API。

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

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

當 API 完全加載時,它會查找名為 onYouTubeIframeAPIReady() 的全局函數 你應該定義的。在其中,我們將創建一個新的 YouTube 播放器實例。第一個參數是我們想要被播放器替換的 HTML 元素的 id,在我們的例子中是 video-placeholder .第二個是包含播放器選項的對象:

  • 播放器的寬度和高度。這些可以通過將 CSS 應用於#video-placeholder 來覆蓋。
  • 我們希望在播放器加載時嵌入的視頻的 ID。您可以通過 ?v=之後的字符串從任何 YouTube 鏈接獲取此 ID(例如 youtube.com/watch?v=WwoKkq685Hk )
  • playerVars 對像是一組參數。我們將播放器的顏色設置為白色,並通過提供兩個額外的視頻 ID 創建了一個播放列表,以逗號分隔。您可以在此處查看所有可用屬性的列表。
  • 事件 對象由事件監聽器和它們調用的函數組成。 API 傳遞一個事件 對像作為唯一屬性,包含目標和數據。您可以在此處閱讀有關活動的更多信息。

整個代碼如下所示:

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() 播放器完全加載時將調用函數。它將開始一個間隔,每秒更新我們的一些控件。

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)

}

顯示當前時間和視頻時長

這是由 updateTimerDisplay() 完成的 ,每秒調用一次的函數之一。它利用 API 的方法為我們提供有關視頻長度的足夠信息。

// 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;
}

使用 播放器 調用方法 我們在乞討中創建的對象。我們可以使用 getCurrentTime() 獲取視頻中的秒數 ,以及 getDuration() 的視頻總時長 這兩個函數都會返回我們正確格式化為時間的秒,然後寫入 DOM。

進度條

這是使用 player.seekTo(sec) 完成的 函數,將視頻跳轉到參數中提供的秒數。

為了證明這一點,我們製作了自己版本的 YouTube 進度條,使用類型為 range 的輸入字段。當我們點擊它的任意位置時,我們獲取輸入值,女巫給我們一個百分比。然後我們使用這個百分比來計算我們想要對視頻取得什麼進展並跳到相應的秒數。

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

});

上面的代碼允許我們控制視頻,但我們也希望進度條隨著視頻的進行自動移動。要了解我們如何做到這一點,請返回 initialize() 函數,更具體地說,它的每秒間隔和 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);
}

播放控件

這裡沒有什麼不尋常的。只需製作兩個按鈕並在點擊時調用所需的方法。

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

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

聲音選項

我們可以使用播放器提供的 getter 和 setter 方法創建靜音切換按鈕。

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

如果我們想使用百分比設置音量,我們可以使用數字輸入字段和 setVolume() 方法。它將自動驗證提供的參數,因此我們不必擔心將浮點值或數字傳遞到 [0 :100] 區間之外。

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

其他播放器設置

改變播放速度

player.setPlaybackRate() 方法期望以下之一作為其參數:

  • 0.25
  • 0.5
  • 1
  • 1.5
  • 2

創建一個 <select> HTML 中的元素並將速度設置為 <option> 孩子們。用戶與選擇的交互將導致僅對當前正在播放的視頻改變速度,並在下一個開始時重置為默認值(速度為 1)。

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

改變視頻質量

改變視頻質量的工作方式與改變速度非常相似。方法是 setPlaybackQuality() 它期望的參數是以下字符串之一:

  • 高分辨率
  • 高清1080
  • 高清720
  • 中等

請注意,此功能僅建議應使用的質量,因為這在很大程度上取決於互聯網連接和視頻本身。

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

播放列表

我們可以使用 API 中的這些方法播放播放列表中的下一個或上一個視頻。

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

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

如果要播放播放列表中的特定視頻,請使用 player.playVideoAt(index) ,其中 index 是一個整數,指定播放哪個視頻,0 是第一個。

動態排隊視頻

我們要演示的最後一件事是如何向播放器動態添加新視頻。如果您查看我們的演示,您會在底部看到三個貓視頻的縮略圖。我們將他們的 YouTube 鏈接添加為數據屬性,當其中任何一個被點擊時,所選視頻將被加載到播放器中。

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

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

    player.cueVideoById(url);

});

結論

我們的教程到此結束!我們希望您發現本教程對您有用。如果您想了解有關 YouTube API 的更多信息,請查看以下資源:

  • YouTube Iframe 播放器 API 參考 - 此處。
  • YouTube 播放器支持的參數 - 在這裡。
  • YouTube 開發者直播:嵌入式網絡播放器自定義 - 此處。

Tutorial JavaScript 教程
  1. 使用 DataLoader 批處理 API 請求

  2. 技術(白板)面試

  3. Grandjs 新功能

  4. JavaScript 中的默認參數

  5. 使用 Auth0 Pt 保護微服務。 4(把它們放在一起)

  6. 什麼是 javascript 中的承諾?它如何解決回調地獄問題?

  7. rubico 簡化異步代碼

  1. 文本對齊:正確不起作用...

  2. 功能和 JWT 安全性

  3. PNPM 智能安裝

  4. 使用 React Hooks 創建 Toast API

  5. 流星 1.8.2 已發布

  6. React Native 中的 AsyncStorage 是什麼?

  7. 2021 年的 9 個 Web 開發最佳實踐

  1. 開始研究用於構建網站的庫

  2. React-Redux connect():何時以及如何使用它

  3. 使用 Nodejs Express MongoDB 構建 Restful API

  4. 仍在使用 jQuery,即使您可以根據需要創建自己的?