JavaScript >> Javascript 文檔 >  >> Tags >> CSS

使用 YouTube 的 API 製作自定義 YouTube 視頻播放器

視頻演示是任何產品頁面的重要補充。通過演示,您可以展示產品的功能,而無需讓訪問者閱讀長段文本。但是除了製作視頻之外,您仍然需要手動轉換它並找到(或編碼)某種將其顯示在您的網站上的 Flash 播放器。

另一種可能的方法是將其上傳到 youtube 等視頻共享網站,但嘗試將播放器整合到您的設計中會很困難。

對我們來說幸運的是,YouTube 確實為這個問題提供了解決方案 - 他們的無鉻播放器(常規可嵌入播放器的精簡版),它允許您構建和設置自己的自定義控件。這樣一來,您既可以快速安全地將視頻包含在您的頁面中,又可以自由定制您可能想要的任何方式。

理念

今天我們要製作一個使用 YouTube 的 chromeless player 的 jQuery 插件 ,並創建我們自己的一組簡約控件,可與您的設計完美集成。支持的控件包括播放/暫停/重播按鈕和可點擊的進度條。

該插件將使用 YouTube 的 gdata api 來確定視頻是否允許嵌入,並獲取有關它的大量信息,例如標題、描述、標籤、屏幕截圖等,您可以使用這些信息來改進插件。

使用插件嵌入視頻非常簡單:

// Embed a video into the #player div:
$('#player').youTubeEmbed('http://www.youtube.com/watch?v=u1zgFlCw8Aw');

// Chaining is also supported:
$('#player').youTubeEmbed('http://www.youtube.com/watch?v=u1zgFlCw8Aw');
        .youTubeEmbed('http://www.youtube.com/watch?v=AsdfFdwlzdAw');

您還可以為嵌入的視頻指定寬度(高度會根據寬高比自動計算),並選擇禁用進度條:

$('#player').youTubeEmbed({
    video           : 'http://www.youtube.com/watch?v=u1zgFlCw8Aw',
    width           : 600,      // Height is calculated automatically
    progressBar : false     // Hide the progress bar
});

您可以從上面的下載按鈕中獲取插件,然後從第一步開始。

第 1 步 - XHTML

我們的插件依賴於 jQuery SWFObject 將 SWF 文件嵌入到頁面中。您可以在下面看到兩個插件生成的組合標記。

youtube-player.html

<div class="flashContainer" style="width: 640px; height: 360px;">

    <object height="360" width="640" id="video_26ELpS3Wc4Q" type="application/x-shockwave-flash"
    data="http://www.youtube.com/apiplayer?enablejsapi=1&version=3">

        <param value="always" name="allowScriptAccess">
        <param value="transparent" name="wmode">
        <param value="video_id=26ELpS3Wc4Q&playerapiid=26ELpS3Wc4Q"
        name="flashvars">
        <param value="http://www.youtube.com/apiplayer?enablejsapi=1&version=3"
        name="movie">

    </object>

    <div class="controlDiv play"></div>

    <div class="progressBar">
        <div class="elapsed"></div>
    </div>
</div>

.flashContainerDiv 由插件為頁面上的每個視頻動態創建。它由 SWFObject 生成的嵌入代碼填充,即 .controlDiv (作為播放/暫停按鈕)和進度條。

如上所述,播放器本身的插入由 SWFObject 插件處理。根據瀏覽器,它可以輸出 object 元素,或非標準的嵌入 IE 的元素。這減輕了我們的負擔,讓我們能夠專注於查詢 YouTube 的 API 和構建播放器控件等任務。

第 2 步 - jQuery

該插件的代碼位於 youTubeEmbed-jquery-1.0.js 文件。但是,在能夠使用它之前,您需要在頁面中包含最新版本的 jQuery 庫,以及 jQuery SWFObject 插件,最後是 script.js ,在演示頁面中插入兩個視頻,並處理預覽表單的提交。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.swfobject.1-1-1.min.js"></script>
<script src="youTubeEmbed/youTubeEmbed-jquery-1.0.js"></script>
<script src="script.js"></script>

在我們開始深入研究播放器插件的代碼之前,讓我們看一下來自 YouTube 的 gdata api 的示例響應。它可以為您提供有關視頻的許多有用信息,包括時長、訪問控制(這兩個都由插件使用)以及各種附加數據,例如標題、描述、標籤、屏幕截圖等。

示例 JSON 響應

{
    "id": "u1zgFlCw8Aw",
    "uploaded": "2008-03-05T01:22:17.000Z",
    "updated": "2010-07-23T01:02:42.000Z",
    "uploader": "GoogleDevelopers",
    "category": "People",
    "title": "The YouTube API: Upload, Player APIs and more!",
    "description": "Listen to the YouTube APIs and Tools team talk about...",
    "tags": ["youtube", "launch", "api", "engineering"],
    "thumbnail": {
        "sqDefault": "http://i.ytimg.com/vi/u1zgFlCw8Aw/default.jpg",
        "hqDefault": "http://i.ytimg.com/vi/u1zgFlCw8Aw/hqdefault.jpg"
    },
    "player": {
        "default": "http://www.youtube.com/watch?v=u1zgFlCw8Aw",
        "mobile": "http://m.youtube.com/details?v=u1zgFlCw8Aw"
    },
    "content": {
        "1": "rtsp://v4.cache5.c.youtube.com/CiILE..",
        "5": "http://www.youtube.com/v/u1zgFlCw8Aw?f..",
        "6": "rtsp://v3.cache4.c.youtube.com/CiILENy73.."
    },
    "duration": 259,
    "location": "san bruno, ca",
    "rating": 4.3,
    "likeCount": "119",
    "ratingCount": 144,
    "viewCount": 251024,
    "favoriteCount": 164,
    "commentCount": 118,
    "accessControl": {
        "syndicate": "allowed",
        "commentVote": "allowed",
        "rate": "allowed",
        "list": "allowed",
        "comment": "allowed",
        "embed": "allowed",
        "videoRespond": "allowed"
    }
}

此響應對象的所有字段都可用作 data 中的屬性 變量(data.fieldname )。您可以修改插件以在 youtube 上顯示帶有視頻頁面鏈接的標題,或顯示視頻的評分。

現在讓我們直接進入腳本的源代碼。

youTubeEmbed-jquery-1.0.js - 第 1 部分

(function($){

    $.fn.youTubeEmbed = function(settings){

        // Settings can be either a URL string,
        // or an object

        if(typeof settings == 'string'){
            settings = {'video' : settings}
        }

        // Default values

        var def = {
            width       : 640,
            progressBar : true
        };

        settings = $.extend(def,settings);

        var elements = {
            originalDIV : this, // The "this" of the plugin
            container   : null, // A container div, inserted by the plugin
            control     : null, // The control play/pause button
            player      : null, // The flash player
            progress    : null, // Progress bar
            elapsed     : null  // The light blue elapsed bar
        };

        try{    

            settings.videoID = settings.video.match(/v=(\w+)/)[1];

            // safeID is a stripped version of videoID,
            // ready for use as a JavaScript function name

            settings.safeID = settings.videoID.replace(/[^a-z0-9]/ig,'');

        } catch (e){
            // If the url was invalid, just return the "this"
            return elements.originalDIV;
        }

        // Fetch data about the video from YouTube's API

        var youtubeAPI = 'http://gdata.youtube.com/feeds/api/videos?v=2&alt=jsonc';

        $.get(youtubeAPI,{'q':settings.videoID},function(response){

            var data = response.data;

            if(!data.totalItems || data.items[0].accessControl.embed!="allowed"){

                // If the video was not found, or embedding is not allowed;

                return elements.originalDIV;
            }

            // data holds API info about the video:

            data = data.items[0];

            settings.ratio = 3/4;
            if(data.aspectRatio == "widescreen"){
                settings.ratio = 9/16;
            }

            settings.height = Math.round(settings.width*settings.ratio);

我們首先將腳本定義為 jQuery 插件,將其作為函數添加到 $.fn 目的。為了使代碼更易於理解和閱讀,我將頁面的所有元素(例如控件和進度條 div)放在一個名為 elements 的結構中 .

提取 id 後 視頻(?v= 之後的唯一 11 個字符序列 參數),我們向 youtube 的 gdata API 發送 JSONP 請求。根據是否存在這樣的視頻,以及是否允許在其上嵌入,我們繼續計算縱橫比。視頻的高度是通過使用這個比率並乘以寬度來計算的。

youTubeEmbed-jquery-1.0.js - 第 2 部分

          // Creating a container inside the original div, which will
            // hold the object/embed code of the video

            elements.container = $('<div>',{className:'flashContainer',css:{
                width   : settings.width,
                height  : settings.height
            }}).appendTo(elements.originalDIV);

            // Embedding the YouTube chromeless player
            // and loading the video inside it:

            elements.container.flash({
                swf         : 'http://www.youtube.com/apiplayer?enablejsapi=1&version=3',
                id          : 'video_'+settings.safeID,
                height      : settings.height,
                width       : settings.width,
                allowScriptAccess:'always',
                wmode       : 'transparent',
                flashvars   : {
                    "video_id"      : settings.videoID,
                    "playerapiid"   : settings.safeID
                }
            });

            // We use get, because we need the DOM element
            // itself, and not a jquery object:

            elements.player = elements.container.flash().get(0);

            // Creating the control Div. It will act as a ply/pause button

            elements.control = $('<div>',{className:'controlDiv play'})
                               .appendTo(elements.container);

            // If the user wants to show the progress bar:

            if(settings.progressBar){
                elements.progress = $('<div>',{className:'progressBar'})
                                    .appendTo(elements.container);

                elements.elapsed =  $('<div>',{className:'elapsed'})
                                    .appendTo(elements.progress);

                elements.progress.click(function(e){

                    // When a click occurs on the progress bar, seek to the
                    // appropriate moment of the video.

                    var ratio = (e.pageX-elements.progress.offset().left)/elements.progress.outerWidth();

                    elements.elapsed.width(ratio*100+'%');
                    elements.player.seekTo(Math.round(data.duration*ratio), true);
                    return false;
                });

            }

在代碼的第二部分,我們使用 SWFObject 用於生成 youtube 無鉻播放器的嵌入代碼的插件。請注意,視頻的 id 作為 flashvar 傳遞,因此播放器可以直接加載它。 safeID 變量(videoid 的 JavaScript 安全版本)成為 id 的值 待生成對像元素的參數。這樣我們以後可以通過運行 document.getElementById('video_'+settings.safeID) 來獲取 DOM 元素 並訪問控制 youtube 播放器的方法(播放、暫停等)。

youTubeEmbed-jquery-1.0.js - 第 3 部分

var initialized = false;

// Creating a global event listening function for the video
// (required by YouTube's player API):

window['eventListener_'+settings.safeID] = function(status){

    var interval;

    if(status==-1)  // video is loaded
    {
        if(!initialized)
        {
            // Listen for a click on the control button:

            elements.control.click(function(){
                if(!elements.container.hasClass('playing')){

                    // If the video is not currently playing, start it:

                    elements.control.removeClass('play replay').addClass('pause');
                    elements.container.addClass('playing');
                    elements.player.playVideo();

                    if(settings.progressBar){
                        interval = window.setInterval(function(){
                            elements.elapsed.width(
                    ((elements.player.getCurrentTime()/data.duration)*100)+'%'
                            );
                        },1000);
                    }

                } else {

                    // If the video is currently playing, pause it:

                    elements.control.removeClass('pause').addClass('play');
                    elements.container.removeClass('playing');
                    elements.player.pauseVideo();

                    if(settings.progressBar){
                        window.clearInterval(interval);
                    }
                }
            });

            initialized = true;
        }
        else{
            // This will happen if the user has clicked on the
            // YouTube logo and has been redirected to youtube.com

            if(elements.container.hasClass('playing'))
            {
                elements.control.click();
            }
        }
    }

為了能夠控制視頻播放器,我們需要在某些事件(如播放停止、視頻就緒等)發生時得到通知。通常,這意味著我們需要傳遞一個回調函數,每次發生此類事件時,播放器都會執行該回調函數。

不幸的是,flash 只能執行在全局範圍內定義的函數,並且看不到插件內部定義的函數。但是,通過創建具有唯一名稱的函數(使用 safeID ) 並將它們顯式添加到 window 對像我們可以做到這一點。如果不是這個小技巧,插件是不可能工作的。

youTubeEmbed-jquery-1.0.js - 第 4 部分

              if(status==0){ // video has ended
                    elements.control.removeClass('pause').addClass('replay');
                    elements.container.removeClass('playing');
                }
            }

            // This global function is called when the player is loaded.
            // It is shared by all the videos on the page:

            if(!window.onYouTubePlayerReady)
            {
                window.onYouTubePlayerReady = function(playerID){
                    document.getElementById('video_'+playerID).addEventListener('onStateChange','eventListener_'+playerID);
                }
            }
        },'jsonp');

        return elements.originalDIV;
    }

})(jQuery);

我們在上一段代碼中創建的事件監聽函數,通過 addEventListener 附加到播放器 方法。每次當“stateChange " 發生(播放開始、播放暫停、播放結束等)。一個數字代碼作為參數傳遞給事件監聽函數,對應於事件。

現在讓我們看看我們的插件是如何使用的。

script.js

$(document).ready(function(){

    $('#player').youTubeEmbed('http://www.youtube.com/watch?v=u1zgFlCw8Aw');

    /*
        //You can alternatively pass an object:

        $('#player').youTubeEmbed({
            video           : 'http://www.youtube.com/watch?v=u1zgFlCw8Aw',
            width           : 600,      // Height is calculated automatically
            progressBar : false     // Hide the progress bar
        });

    */

});

你只需要調用 youTubeEmbed() 方法並將其傳遞給字符串或配置對象。如果傳遞了字符串,則假定它是 YouTube 視頻的 URL。如果您要傳遞一個對象,請確保您傳遞的是 video 具有正確視頻 URL 的屬性。

第 3 步 - CSS

最後,我們將一些 CSS 樣式應用於播放器。他們將改變播放器控件的設計並定義它們在播放器窗口中的定位方式。

youTubeEmbed-jquery-1.0.css

.flashContainer{

    /*  Setting the container to relative positioning
        so we can center the control div */

    position:relative;
    overflow:hidden;
}

.progressBar{
    display:none;
    position:absolute;
    width:auto;
    height:8px;
    left:20px;
    right:105px;
    bottom:20px;
    background-color:#141414;
    overflow:hidden;
    cursor:pointer;

    /* A light CSS3 bottom highlight */

    -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
    box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
}

.progressBar .elapsed{
    position:absolute;
    width:0;
    height:100%;
    background-color:#1fa2f6;
    border-right:1px solid #49AFF0;
}

.controlDiv{
    /* Centering the control div */
    position:absolute;
    width:120px;
    height:120px;
    cursor:pointer;
    top:50%;
    left:50%;
    margin:-60px 0 0 -60px;
}

.controlDiv.play{
    background:url('img/play.png') no-repeat center center;
}

.controlDiv.replay{
    background:url('img/replay.png') no-repeat center center;
}

.controlDiv.pause{
    background:url('img/pause.png') no-repeat -99999px;
}

.flashContainer:hover .controlDiv.pause{
    background-position:center center;
}

/* Only show the progress bar when the video is playing */

.flashContainer.playing:hover .progressBar{
    display:block;
}

要自定義播放器的外觀,您只需更改上面的顏色值。您還可以使用播放/暫停按鈕編輯 png 文件。顯然,這比修改默認 youtube 播放器的外觀要容易得多。它還去除了所有不必要的 chrome,讓您擁有最重要的東西 - 您的視頻。

有了這個我們的自定義 YouTube 播放器插件就完成了!

你喜歡這個教程嗎?在下面的評論部分分享您的想法。


Tutorial JavaScript 教程
  1. 在 Next.js 中處理敏感的客戶端 API 密鑰

  2. jQuery 簡介

  3. 聚會公告

  4. 免費 10 個新的 Chakra UI 組件 - TemplatesKart

  5. 在 JavaScript 中使用 stopPropagation() 停止事件冒泡

  6. 使用 Pexels API 創建一個驚人的圖像搜索應用程序

  7. 如何在 React 中持久存儲狀態? [使用堅持]

  1. 如何更新 dynamoDB 表中的項目

  2. 讓我們漂亮地顯示來自 API 的響應

  3. 9 個適合初學者的有趣 Vue JS 項目創意,可以幫助你被錄用

  4. 如何使用 React 渲染列表

  5. 推遲優化 JavaScript 性能

  6. 親吻 JavaScript

  7. 為什麼要參加 9 月的 Meteor Hackathon 2022

  1. 使用 Vue.js 和 Chart.js 創建令人驚嘆的圖表

  2. 現實生活中的例子 - 遞歸組件

  3. 如何使用 React 渲染列表

  4. React Hook Form - 在 react.js 應用程序中管理表單的快速、高效且簡單的方法