線上 YouTube 新聞直播聚合器,單一頁面輕鬆切換多個直播頻道
YouTube 是全球最大的影音平台,除了豐富多元的影片內容外,也有來自世界各地的新聞直播頻道。然而,無論是在 YouTube 網站或官方 App,切換新聞頻道的操作都不如電視般直覺方便。為了解決問題,筆者建立了「線上 YouTube 新聞播放器」,將多個台灣新聞直播頻道整合在同一頁面,透過按鈕即可輕鬆切換頻道。網頁採用響應式設計,支援電腦與行動裝置,方便隨時收看 YT 新聞直播。


筆者不是專業的網頁設計人員,而是利用 ChatGPT 協助撰寫 HTML 代碼,先向 AI 提出需求獲得網頁框架,再經過多次互動調整介面與功能,包括響應式設計、瀏覽器記憶上次觀看頻道等。將 HTML 文件上傳到 Yay.Boo 託管平台建立一頁式網站,開啟網頁可以觀看並快速切換多個 YouTube 新聞直播頻道。

若有興趣打造自己的線上 YouTube 播放器,可以下載 HTML 文件,並依需求自行添加或修改頻道連結。

網站名稱:YT 新聞直播
範例網址:https://ytnews.yay.boo/
HTML文件:【MEGA】

使用說明:

1. 開啟『ytnews.yay.boo』網站,頁面上方有頻道按鈕,在觀看 YouTube 新聞直播時,點擊按鈕即可切換頻道,無需離開當前頁面。
線上 YouTube 新聞直播聚合器,單一頁面輕鬆切換多個直播頻道

2. 網頁採用響應式設計,適用於電腦與行動裝置。當螢幕寬度小於 600px 時,頻道按鈕會自動切換為下拉選單。還可在手機上背景播放,即使鎖屏也能收聽直播。
線上 YouTube 新聞直播聚合器,單一頁面輕鬆切換多個直播頻道

3. 筆者是利用 ChatGPT 撰寫 HTML 程式碼,與 AI 多次對話不斷調整介面與功能。
線上 YouTube 新聞直播聚合器,單一頁面輕鬆切換多個直播頻道

4. 下載 HTML 文件後,可依需求添加或修改頻道連結,再將 HTML 文件上傳到網站託管平台,就能建立個人專屬的 YouTube 播放器頁面。
線上 YouTube 新聞直播聚合器,單一頁面輕鬆切換多個直播頻道

結語:

自從有了大型語言模型(如 ChatGPT)等 AI 聊天服務,以往需要專業能力的工作變得更加簡單,透過 AI 對話可以輕鬆完成網頁製作。如果希望修改一頁式 YouTube 播放器介面或增加功能,在與 AI 互動時傳送 HTML 文件並說明需求,就能獲得新的程式碼,讓播放器功能符合個人化需求。