Try   HackMD

Youtube iframe API

監控於iframe內嵌youtube影片之狀態，並能進行操作
參考文件

一、使用方式：

1. 插入API

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

2. 設置內嵌影片區塊

方式一
讓程式自行產出整塊iframe
範例：

<div id="your_iframe_id"></div>

方式二
預先設定好iframe的各種設定
範例：

<iframe width="100%" height="100%" 
id="your_iframe_id" 
src="https://www.youtube.com/embed/your_youtube_id?enablejsapi=1" 
title="YouTube video player" 
frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen 
onload="onYouTubeIframeAPIReady()"></iframe>

​​​​補充說明： 
​​​​1. youtube_id後一定要加入"?enablejsapi=1"允許API控制影片，否則無效
​​​​2. 鑑於安全性問題官方建議加入origin參數，並將網域設定為其參數值，排除外部入侵
​​​​3. 需加上onload="function_name()"

3. 撰寫要做的事情

對應方式一：

<script>
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '360', //設定視口高度
          width: '640',  //設定視口寬度
          
          更多參數請參考置頂文件
          
          videoId: 'your_youtube_id',
          events: {
            'onReady': onPlayerReady, //dom ready時執行function
            'onStateChange': onPlayerStateChange //影片狀態變化時執行function
          }
        });
      }
function onPlayerReady(event) {
        
        do something... ...
        
}
      
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
          do something... ...
        }
}

對應方式二：

<script>
	function onYouTubeIframeAPIReady() {
		var video_id='your_iframe_id'
		var player = new YT.Player(video_id, {
		    events: {
			    'onStateChange': function(event) {
					if (event.data == YT.PlayerState.PLAYING) {
                    
						do something... ...
					
                    }
				}
			}
		});
	}
</script>

二、單頁多個嵌入影片控制方式

目前測試可行的方案為：
有一組youtube_id就建立一組

var video_id='your_iframe_id'
var player = new YT.Player(video_id, {
		    events: {
			    'onStateChange': function(event) {
					if (event.data == YT.PlayerState.PLAYING) {
                    
						do something... ...
					
                    }
				}
			}
		});

參考範例：

<script>
	function onYouTubeIframeAPIReady() {
	    <?php foreach ($content->store_youtube as $key => $youtube_id) :
		    if ($key < 3) : ?>
			var video_id<?=$key+1;?>='<?=$youtube_id;?>'
			var player<?=$key+1;?> = new YT.Player(video_id<?=$key+1;?>, {
				events: {
					'onStateChange': function(event) {
						if (event.data == YT.PlayerState.PLAYING) {
                        
							do something... ...
						
                        }
					}
				}
			});
		    <?php endif; ?>
	    <?php endforeach; ?>
		}
</script>

三、播放器事件

  • onReady
  • onStateChange
    • -1 =>未開始 （YT.PlayerState.UNSTARTED）
    • 0 =>已結束（YT.PlayerState.ENDED）
    • 1 =>正在播放 （YT.PlayerState.PLAYING）
    • 2 =>已暫停 （YT.PlayerState.PAUSED）
    • 3 =>正在緩衝 （YT.PlayerState.BUFFERING）
    • 5 =>影片已插入 （YT.PlayerState.CUED）
  • onPlaybackQualityChange :當有設定setPlaybackQuality參數（指定尺寸）時，會於參數變動時觸發
    • small
    • medium
    • large
    • hd720
    • hd1080
    • highres
  • onPlaybackRateChange ：當播放速度發生變動時觸發
  • onError
    • 2 =>請求包含無效參數 ex:videoID包含無效字符
    • 5 =>請求內容無法在HTML5播放或是其他與HTML5播放器相關的錯誤
    • 100 =>找不到請求的影片
    • 101 =>所請求影片的所有者禁止於嵌入式播放器播放
    • 150 =>幾乎等於101，官方文件也沒寫清楚
  • onApiChange :播放器以提供的Api加載即觸發

四、播放器控制項

隊列函數

  • .cueVideoById
  • .loadVideoById
  • .cueVideoByUrl
  • .loadVideoByUrl

播放影片

  • .playVideo():播放當前載入的影片
  • .pauseVideo()：暫停正在播放的影片
  • .stopVideo()：停止加載當前影片
  • .seekTo(seconds:Number, allowSeekAhead:Boolean)：定位到影片指定的時間

播放列表影片

  • .nextVideo()：加載並播放下一個影片
  • .previousVideo()：加載並播放上一個影片
  • .playVideoAt(index:Number)：指定加載並播放影片列表的影片

變更音量

  • .mute():靜音
  • .unmute():取消靜音
  • .isMuted()：播放器狀態（靜音:true,非靜音：false）
  • .setVolume(volume:Number):控制音量大小（0~100）
  • .getVolume():取得目前音量值

播放器大小

  • .setSize(width:Number, height:Number)：設置播放器大小

播放器速度

  • .getPlaybackRate():設置播放速度（0.25, 0.5, 1, 1.5 ,2）
  • .setPlaybackRate():可設置建議的播放速度
  • .getAvailablePlaybackRates()：用於返回適合當前影片的速度

設定播放列表行為

  • .setLoop(boolean):指定是否循環播放列表影片
  • .setShuffle():指定影片是否隨機播放

播放狀態

  • .getVideoLoadedFraction():回傳0~1的值，用於指定緩衝時播放器顯示的影片百分比
  • .getPlayerState()：回傳影片狀態
  • .getCurrentTime()：回傳影片已播放的時長

播放尺寸

  • .getPlaybackQuality()：用於檢索目前影片的實際尺寸，返回值可能為highres、hd1080、hd720、large、medium 和 small，若當前無影片則為undefined
  • .setPlaybackQuality：用於設定建議的影片尺寸，若尺寸確實發生變化則會觸發onPlaybackQualityChange事件
    • small =>播放器高度为240像素，且播放器尺寸至少为 320x240 像素才能符合 4:3 的寬高比
    • medium =>播放器高度为360像素，且播放器尺寸为 640x360 像素（符合16:9的寬高比）或 480x360 像素（符合 4:3 的寬高比）
    • large =>播放器高度为480像素，且播放器尺寸为 853x480 像素（符合 16:9 的寬高比）或 640x480 像素（符合 4:3 的寬高比）
    • hd720 =>播放器高度为720像素，且播放器尺寸为 1280x720 像素（符合 16:9 的寬高比）或 960x720像素（符合 4:3 的寬高比）
    • hd1080 =>播放器高度为1080像素，且播放器尺寸为 1920x1080 像素（符合 16:9 的寬高比）或 1440x1080 像素（符合 4:3 的寬高比）
    • highres =>播放器高度大于1080像素，这意味着播放器的寬高比大于 1920x1080 像素
    • default =>會自動選擇合適的尺寸
  • .getAvailableQualityLevels():回傳適合當前影片的尺寸格式

檢索影片資訊

  • .getDuration()：回傳影片時長
  • .getVideoUrl()：回傳加載中的影片YouTube.com網址
  • .getVideoEmbedCode()：回傳加載中的影片嵌入代碼

檢索影片列表資訊

  • .getPlaylist()：回傳目前播放列表的ID組
  • .getPlaylistIndex()：回傳目前播放列表的索引

增加或移除事件監聽

  • .addEventListener(event:String, listener:String)：為指定event增加監聽器函數
  • .removeEventListener(event:String, listener:String)：移除指定event的監聽函數

訪問或修改DOM節點

  • .getIframe()：回傳嵌入式iFrame節點
  • .destroy()：移除包含的iFrame

五、播放器參數

參數
autoplay 指定播放器是否自動播放，預設為0，需與mute同時使用才有效
mute 靜音
cc_load_policy 設置是否顯示字幕
cc_lang_pref 此參數用於指定播放器顯示字幕的預設語言。 參數設定參考
hl 設定播放器界面語言，參數同 cc_lang_pref
color 指定已看過之進度條顏色，參數 white/red
controls 是否顯示播放器控制項，預設為1
disablekb 是否支援鍵盤控制播放器，預設為0（支援）
enablejsapi 是否允許通過iFrame或JavaScript Player API控制播放器，預設為0
origin iframe API提供之額外安全設置，且僅支援iFrame嵌入式播放器，參數值為嵌入影片的網域
start 指定影片開始播放的位置，須為正整數，單位/秒。但有可能會有1~2秒的誤差範圍
end 用於指定時間，從影片開頭至應該結束為止（並非以start設定的開頭開始計算）
fs 是否顯示全螢幕按鈕，預設為1
iv_load_policy 是否顯示註釋，預設為1，不顯示為3
list 與listType參數搭配確定播放器加載內容，使用此二參數則不需指定影片ID
listType 有效參數包含：
playlist =>list將指定播放列表ID（需使用PL作為ID前綴）
search =>list將指定搜索查詢
user_uploads =>list將會確認將要加載的影片所在的頻道(list指定user name)
modestbranding 是否顯示youtube LOGO
loop 設定影片是否循環播放，預設為0，配合playlist設定
playlist 指定要播放的影片ID列表（以逗號為分隔）
playsinline 此參數控制影片於IOS上的播放器是以內嵌或是全螢幕方式播放，0為全螢幕（預設），1為 allowsInlineMediaPlayback 属性值設為 TRUE 的情况下建立的 UIWebViews 會以内嵌方式播放
rel 可用參數為
0 =>推薦影片將從同一頻道選出
1 =>會顯示相關推薦影片
widget_referrer 此參數用於標記嵌入播放器的網址，YouTube 數據分析會使用此參數以標記與流量來源相關的網域
Last changed by 
 
Kyosukewu
0
1
2371
Published on HackMD