油管的文檔直接放了示例代碼：
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
直接給出了註釋，很清晰明瞭。當然 https://www.youtube.com/iframe_api 也是可以直接用 script 標籤直接引入。其中 videoId 可以在油管上找到。我們隨便找一個視頻就可以在地址欄看到 https://www.youtube.com/watch?v=PkZNo7MFNFg 後面的 v=PkZNo7MFNFg 這個就是 videoId 。
1. 基本參數
油管的 IFrame Player API 可自定義的程度並不高，可能也是出於要保護對自家產品利益的目的，視頻播放結束後推薦列表之類的是去不掉的。
| 參數名 | 說明 |
|---|---|
autoplay |
取值0和1，自動播放。默認爲0。（我自己試了好像不生效，Stack Overflow 上有人說改了） |
cc_lang_pref |
顯示字幕的默認語言，取值爲 ISO 639-1雙字母語言代碼 |
cc_load_policy |
值：1。默認根據用戶偏好設置確定的。設爲1會使系統在默認情況下顯示字幕，即使在用戶關閉字幕。 |
color |
進度條顏色，只有兩種可選 red 和 white，設置成 white 時，modestbranding 無效。 |
modestbranding |
是否顯示 YouTube 徽標。 |
controls |
是否顯示播放器控件 0 不顯示，1 顯示，默認 1。 |
disablekb |
是否允許鍵盤控制，0 允許，1 不允許，默認 0。 |
enablejsapi |
是否允許通過 IFrame API 控制播放器。0 不允許，1 允許，默認 0。 |
end |
播放多少秒後停止。（正整數） |
fs |
是否顯示全屏按鈕，0 不顯示，1 顯示，默認 1。 |
hl |
播放器多語言。取值爲 [ISO 639-1雙字母語言代碼。 |
iv_load_policy |
顯示視頻註釋，而設置爲3不會顯示視頻註釋。默認值爲1。（我沒發現默認註釋是啥玩意） |
listType |
有效的參數值playlist，search和user_uploads。 |
list |
結合 listType 確定播放列表的內容。 |
loop |
循環播放視頻，0 不循環，1循環。默認值爲 0。單視頻時需要在playlist放一個相同videoId |
origin |
大致就是安全域名吧。enablejsapi爲 1 的時候，這個參數是當前域名。 |
playlist |
要播放的視頻列表，以逗號分隔的視頻ID。 |
playsinline |
控制在 iOS 全屏播放。0 全屏，1 不全屏。 |
start |
從多少秒開始播放。（正整數） |
widget_referrer |
看了半天沒看明白的 api 。(大致好像是表示來源……) |
rel |
播放結束後顯示相關視頻。0 不顯示，1 顯示。（這個api已經修改爲0推薦同頻道，1推薦相關） |
showinfo （棄用） |
是否顯示視頻標題和上傳者等信息。0 不顯示，1 顯示。 |
在 onYouTubeIframeAPIReady 方法中直接傳參就可以了，如下：
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'PkZNo7MFNFg',
playerVars: {
enablejsapi: 1,
autoplay: 1,
controls: 0,
loop: 1,
cc_lang_pref: 'en',
iv_load_policy: 1,
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
2. 鉤子函數（hook）
從上面的代碼案例大家其實也看到了，在 events 裏面有 onReady，onStateChange 其實對應的就是相應的鉤子函數。
| hook | 作用 |
|---|---|
onReady |
在播放器準備就緒後觸發。 |
onStateChange |
視頻狀態發生改變時會觸發。 |
onPlaybackQualityChange |
視頻播放質量發生變化時觸發。 |
onPlaybackRateChange |
視頻播放速率發生變化時觸發。 |
onError |
播放器中發生錯誤時觸發。 |
onApiChange |
播放器已加載（或卸載）具有公開 API 方法的模塊觸發。 |
使用方法就像案例一樣。
3. YT.Player 對象方法（幾個常用的）
| 方法名 | 作用 |
|---|---|
playVideo() |
播放 |
pauseVideo() |
暫停 |
stopVideo() |
停止 |
seekTo(seconds:Number, allowSeekAhead:Boolean) |
跳轉到視頻多少秒。seconds要跳轉的秒數，allowSeekAhead 當秒數已經超出已緩衝時間，是否發出請求 |
nextVideo() |
播放下一個視頻 |
previousVideo() |
播放上一個視頻 |
playVideoAt(index:Number) |
播放指定視頻（index 必傳，爲視頻列表下表） |
mute() |
設置爲靜音 |
unMute() |
取消爲靜音 |
isMuted() |
獲取當前是否靜音 |
setVolume(volume:Number) |
設置播放器的當前音量 |
getVolume() |
獲取播放器的當前音量 |
setSize(width:Number, height:Number) |
設置視頻大小（單位：像素） |
getPlayerState() |
返回播放器的狀態 |
getCurrentTime() |
返回視頻已播放的時長 |
getPlaybackQuality() |
當前視頻的實際質量 |
setPlaybackQuality(suggestedQuality:String) |
設置當前視頻的建議質量。suggestedQuality 參數的值可以爲small、medium、large、hd720、hd1080、highres 或 default。 |
getDuration() |
返回當前正在播放的視頻的時長 |
getVideoUrl() |
返回當前已加載/正在播放的視頻的 YouTube.com 網址 |
getVideoEmbedCode() |
返回當前已加載/正在播放的視頻的嵌入代碼。 |
getPlaylist() |
按當前順序返回播放列表中視頻ID的數組。 |
getPlaylistIndex() |
返回當前正在播放的播放列表中視頻的索引。 |
使用方法我想不用說，大家都知道怎麼用啦。player.playVideo()