對於 html video 的開發相關知識超多，而 Youtobe 使用上也是不少設定，認識一下如何設定吧…
01-Youtube新舊版的差別
新版因為採用新的技術來播放影片，而YouTube也尚未釋出新的自動播放參數，所以只需修改一下新版iframe內嵌程式碼 就可以達成我們自動播放YouTube嵌入影片的目的。原理是把新版iframe內嵌程式碼的影片網址改成舊版embed內嵌程式碼的影片網址就可以重新使用舊版的YouTube嵌入影片的自動播放參數。
首先找到舊版網址中的的embed
1 | <iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/pY5jko0w8PQ" frameborder="0" allowfullscreen></iframe> |
舊版網址中將embed改成v
1 | <iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/v/pY5jko0w8PQ" frameborder="0" allowfullscreen></iframe> |
新版網址的 /v 無法直接使用在 WordPress 與 codepen 或是 JSbin 之後，頁面開啟後會直接下戴個檔案下來，只能針對 html 直接使用。
02-YouTube嵌入影片網址的結構與控制參數
02-1-結構與使用
1 | <iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/v/pY5jko0w8PQ&autoplay=1" frameborder="0" allowfullscreen></iframe> |
- 影片ID：ID (pY5jko0w8PQ)接在路徑 v/ 之後
- width="480" height="390" 為高和寬的值，如果自適應的話行內試不寫，可以透過JS OR CSS 來控制
- frameborder="0" 為標簽的邊框，這固定要有。
- 網址內接控制參數名稱和值，可參考 API來設定
frameborder="0" 如果在標簽內不加的話，會使用瀏覽器的預設值，以 google chrome 來說是 2px 所以在 iframe 標簽外會有白邊
02-2-控制參數
接在影片ID後，以 & 來區分不同的控制功能，要接下個功能在使用 &來寫。數值控制可參考api來設定。
例如：&autoplay=1&loop=1
1 2 | // autoplay=1&loop=1&playlist=pY5jko0w8PQ <iframe class="fitvidsignore" src="https://www.youtube.com/v/xGrXISLgvec&autoplay=1&loop=1&autohide:0&rel=0&playlist=xGrXISLgvec" width="100%" height="100%" frameborder="0"></iframe> |
- &playlist=別支片id 會先放 <iframe src="需設影片路徑"> 的影片。在放 &playlist=”第二支id”，如果第沒有 &playlist= 的話影片放完就會回到影片開頭停著
- 如果有二支以上的話id與id間用 , 分開。
參數說明
- &autoplay=1：自動播放參數
- &loop=1：重複播放
- playlist=：播放列表
- autohide：播放控制例戴入執行後自動隱藏若要控制動指標在現
03-使用js來控制
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <div id="muteYouTubeVideoPlayer"></div> <script async src="https://www.youtube.com/iframe_api"></script> <script> function onYouTubeIframeAPIReady() { var player; player = new YT.Player('muteYouTubeVideoPlayer', { videoId: 'xGrXISLgvec', // YouTube 影片ID // width: 2500, // 播放器寬度 (px) // height: "100%", // 播放器高度 (px) playerVars: { autoplay: 1, // 在讀取時自動播放影片 controls: 1, // 在播放器顯示暫停／播放按鈕 showinfo: 0, // 隱藏影片標題 modestbranding: 1, // 隱藏YouTube Logo loop: 1, // 影片循環播放 fs: 1, // 顯示全螢幕按鈕 cc_load_policty: 0, // 隱藏字幕 iv_load_policy: 3, // 隱藏影片註解 autohide: 0, // 播放影片時隱藏影片控制列 playlist: "F78fUF2auvU" }, events: { onReady: function(e) { e.target.mute(); } } }); }; </script> |
See the Pen Youtobe api – js 控制 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
參考資料
YouTube-IFrame Player API-播放器參數
永靖國中資訊組 – 讓YouTube嵌入影片自動播放與重複播放起來!
[WordPress 筆記] 嵌入 YouTube 影片/清單, 設定自動播放並靜音!