You Tube Channel Plugin

前一篇介紹了用內嵌語法的方式內嵌影片, 讓網頁在載入時可以靜音自動播放, 但卻一直無法做到清單自動播放 & 靜音… 苦思無解的情況下只好求助外掛了…

今天要跟大家介紹的就是 YouTube Channel 這支可以自動播放清單 + 靜音的外掛, 想要美美的影片藝廊也 OK 喔~!!!

YouTube Channel Plugin
YouTube Channel 外掛

YouTube Channel

Download: https://es.wordpress.org/plugins/youtube-channel/
Active Installs: 10,000+
Ratings: 4.3/5

下載的方式就不多說了相信大家都已經很熟練了!

本文一樣分兩部分, 第一部份是把影片藝廊內嵌到 post/page 中, 第二部分則是把播放清單利用 widget  的方式放入 sidebar 的設定!

好的, 正文開始!!

C-1. YouTube Video 插入 post/page

下載並 Active 之後, 到 Settings –> YouTube Channel 有很多資料需要你填入, 裡面也都有很詳細的解說, ex: 如何取得 YouTube Data API key, Channel ID, and Playlist ID 等等等, 都不會有什麼大問題, 就一步一步慢慢填下去就是了… 這邊填的所有資料都是將來插入 post/page 中所會用到的預設參數!

填好之後只要在你想要插入的 post/page 寫下下面這行 shortcode 就會播放你預設的影片了, 有沒有好棒棒~!!!

PS. 在 Video 的分頁, 選用 “HTML5 (iframe) Synchronous” 就可以產生單一影片自動播放 + 靜音的效果, 如下圖左! 影片播放結束會顯示其他影片的縮圖, 如下圖右, 點進去是直接進到 channel @ youtube.com 而不是清單喔~!!

html5 video

如果想要插入特定的來源, 從文章編輯的快捷鍵裡就可以新增你要的影片資訊嚕, 如下圖, 非常方便~!!!

YouTube Channel shortcut

 

C-2. YouTube Video Wall/Gallery 影片藝廊

想要 Video Gallery 的效果, 我們要先去 style.css 做一些格式的設定, 語法來源: YouTube Channel! 以 10 個影片為例, 要排成 1 (表頭) + 3×3 的結構, 所以要去設定讓 1-9 支的影片寬度只有 33.333%! 如果只要放 7 隻影片就把 1-9 改成 1-6 就可以嚕~!!

PS. 在 Video 的分頁, 要選用 “Thumbnail” 才會以縮圖呈現喔~!!

首先, 先打開 style.css, 並加入以下語法:

接著只要在你想要插入影片藝廊的 post/page 寫下下面這行 shortcode 就結束了, 真的好簡單~!!!

下面是我實際插入的效果~!!

[youtube_channel num=10 responsive=1 class=ytc_wall_1-9 resource=2 random=1]
 

覺得不夠美?!! 如果影片藝廊 (Video Gallery) 真的對你很重要, 可以參考 wpmudev 介紹的 7 個酷炫 YouTube Galleries 外掛!

 

接下來要進行 Widgets 側欄小工具的部分! 在你安裝好 YouTube Channel 後, 到 Appearance –> Widgets 就可以看到 YouTube Channel 在那嚕~!! 把這個 widget 拉到你要的地方就可以開始填寫內容啦, 填的內容跟 settings 那邊基本一樣 XD

值得注意的是在 Video Settings 那部分, 如下圖, 如果想要 autoplay & mute, 記得把這兩個 item 打勾~!! 在播放模式那邊有四種可以選擇… 如果你想要顯示縮圖 (Thumbnail), 不需要安裝這個外掛就可以達成了喔, 詳見: [WordPress 筆記] 嵌入 YouTube 影片/清單, 設定自動播放並靜音!

今天主要針對 playlist 做介紹, 所以在 “Resource to use” 記得要選 playlist 並填上 playlist ID 喔 (PLxxxxxxxxxx)~!!

下面主要就要來詳述 HTML5 (iframe) Asynchronous & Embedded Playlist 的差別啦~!!

YouTube Channel settings   YouTube Channel settings

 

D-1. Embedded Playlist, 自動且連續播放清單

這是我心目中最理想的播放器, 只可惜他也有最致命的地方, 就是還無法支援自動靜音播放~!!!! (討論串點我)

重點摘要:

  1. 自動播放影片, 途中可以自由切換到下一個影片
  2. 影片播完會繼續連播清單內的下一個影片
  3. 點影片上的標題可以自動連結到 youtube.com 清單
  4. 自動播放時無法靜音播放!!

Embedded playlistYoutube Playlist

D-2. HTML5 iframe Asynchronous, 自動且靜音播放清單內的第一個影片

雖然他不完美, 但是, YouTube 靜音自動播放清單, 這是我目前找得到的唯一解了…

重點摘要:

  1. 靜音且自動播放清單裡的第一個影片
  2. 不會自動播放清單裡的下一個影片
  3. 第一個影片播放途中無法隨意切下一個影片, 強制結束才可以選前一個/後一個影片
  4. 選其他影片, 不會在原 blog 頁面播放, 會直接跳到 youtube.com 影片介面
  5. 點影片上的標題不會連結到清單內容, 而是連到 youtube.com 影片

HTML5 iframe Asynchronous

如果真的不想放棄就是任性的想要自動播放, 輪播 & 靜音 (autoplay + automute), 或許現階段只能放棄 YouTube 了~!! JW Player 是個能實現你願望的外掛, 只是所有的影片都要跟著搬家就是了, 大家自己斟酌啦~!!

延伸閱讀:

–> 更多 WordPress 筆記詳見: ♥ Blogging ♥

 

現居德州, 致力於在平凡的生活中尋找不平凡, 在忙碌的生活中尋找只屬於我們的小幸福... 旅行。美食。生活。牽著手的三人行... 若無特別聲明, 本站所有文章皆為作者原創, 欲轉載請註明作者 & 文章出處, 請尊重智慧財產權, 謝謝~!!