# Youtube iframe API
>監控於iframe內嵌youtube影片之狀態，並能進行操作
>[參考文件](https://developers.google.com/youtube/iframe_api_reference)
## 一、使用方式：
### 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|此參數用於指定播放器顯示字幕的預設語言。 [參數設定參考](https://www.loc.gov/standards/iso639-2/php/code_list.php)|
|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，<font color=red>不顯示為3</font>|
|list|與listType參數搭配確定播放器加載內容，使用此二參數則不需指定影片ID|
|listType|有效參數包含：<br>playlist =>list將指定播放列表ID（需使用PL作為ID前綴）<br>search =>list將指定搜索查詢<br>user_uploads =>list將會確認將要加載的影片所在的頻道(list指定user name)|
|modestbranding|是否顯示youtube LOGO|
|loop|設定影片是否循環播放，預設為0，配合playlist設定|
|playlist|指定要播放的影片ID列表（以逗號為分隔）|
|playsinline|此參數控制影片於IOS上的播放器是以內嵌或是全螢幕方式播放，0為全螢幕（預設），1為 allowsInlineMediaPlayback 属性值設為 TRUE 的情况下建立的 UIWebViews 會以内嵌方式播放|
|rel|可用參數為<br>0 =>推薦影片將從同一頻道選出<br>1 =>會顯示相關推薦影片|
|widget_referrer|此參數用於標記嵌入播放器的網址，YouTube 數據分析會使用此參數以標記與流量來源相關的網域|
Sign in with Wallet
Connect another wallet