2015年7月27日 星期一

【YouTube】(三)如何透過YouTube IFrame Player API控制Youtube撥放器?

有些情況下,我們在網站上嵌入的Youtube影片可能希望可以自行控制撥放器,而不希望User點選Youtube預設的按鈕去控制影片,例如:需要客製化按鈕或影片外觀,或是需要偵測User動作時就會需要了解Youtube Player API是如何運作,本篇即介紹如何透過YouTube IFrame Player API使用Javascript控制Youtube影片。

由於我這次的需求僅須測試「撥放、暫停」,所以線上範例Demo Page就僅只呈現撥放、暫停兩個按鈕,如欲查看其他控制程式碼,請自行上官網reference查看。

線上看範例請點我

**前言**


官方reference一開始有提到,除了IFrame Player API以外,以往控制Youtube撥放器還有Flash Player API以及Javascript Player API,Flash Player API其實就是ActionScript 3.0 Player API,但這兩種目前都已經過時棄用了,所以目前(2015年)是以IFrame Player API為主,此時要研究就研究這個囉,不要再研究過時的API唷~~(不過再過幾年可能又會有新的了吧XD)


**序**


哪招?寫個API研究文搞得像寫小說一樣還有序!?
因為我實在很想說一下我的冤枉路XDD

話說其實在看到官方reference之前,我是先看到官方的Youtube撥放器參數這頁,雖然隨後馬上就看到reference  page,但因為突然就好懶,整個就是能略過英文就想放棄的心態,覺得:

「哎呀~每次研究一堆東西的API,幾乎都在知道他初始化方式後,帶入參數就好了的樣子麻~~」

「快速拉過Youtube撥放器參數這頁看他也有使用教學的代碼,那這樣配合參數應該就可以了喔~~」

「那我就這樣直接Try,直接成功就可以跟一堆英文說掰掰拉~耶~」

然後,就是我自作聰明的冤枉路...

就在我參考Youtube撥放器參數那頁的教學代碼並增加了兩個參數如下後,卻完全沒有我預期的「自動撥放」效果:
 
function onYouTubePlayerAPIReady() {
 player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      enablejsapi: 1,//我以為是這樣用
      autoplay: 1//我以為是這樣用
    });
  }

上面的code是錯的是錯的ㄚㄚㄚㄚ~~
除了上面那兩個參數,其實我也試過其他某些參數,但一樣都沒任何反應,所以是我想得太美好(太偷懶了),人家用法根本不是我想的這麼單純阿XD

果然欲訴則不達,還是乖乖地看英文吧 (哭哭)

**正文**


小孩子還是乖乖地照規矩來吧,偷吃步是天才才能用的

看過官網reference後,才知道原來Youtube撥放器參數是要在playerVars的object裡使用,不過我要得功能似乎跟Youtube撥放器參數無關,所以姑且就不說明這部分(官網範例內有使用方式)。

官網referenceYoutube撥放器參數都有使用教學範例,但兩邊的範例code有差異,除了載入API網址不同(但我看API內的code好像相同!?),再來就是自動呼叫的函數名稱定義不同,一個是onYouTubePlayerAPIReady,一個是onYouTubeIframeAPIReady,我沒有仔細研讀這兩者有何差異,如果需要就請自行研究XD

後續測試是以官網reference中使用的onYouTubeIframeAPIReady為方向測試。

直接來看Demo Code吧~
Html部分就不貼了,重點就是要有一個id=player的div供後續置換為iframe使用,id名稱可自訂,另外,有用到JQuery,記得同時載入核心JS。


詳細JS:
 
 //載入IFrame Player API code
 var tag = document.createElement('script');
 tag.src = "https://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

 //API code載入後,取代id=player的div為帶有YouTube player的iframe tag
 var player;  
 function onYouTubeIframeAPIReady() {//此函數在IFrame Player API code 載入後將自動呼叫
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'M7lc1UVf-VE' //Youtube ID
  });
 } 
 
$(document).ready(function(){
 $("#play").click(function(){
  //按下播放按鈕
  player.playVideo();  
 });
 
 $("#pause").click(function(){
  //按下暫停按鈕
  player.pauseVideo();
 }); 
});

以上,應該很好理解,簡單使用的部分比Google Map好懂多了~~~

如果不想看整份官方reference,這裡提供一些重點部分:



如果您喜歡我的分享、或是我的文章對您有幫助的話,希望能到我的粉絲專頁點個讚追蹤我唷~~

寫程式、技術分享文章很辛苦,寫一篇要花非常久的時間,希望您能幫我點一下頁面上的廣告給我支持跟肯定,讓我更有動力寫這類文章唷~

沒有留言:

張貼留言

writing for work~writing for life~