如何將 Twitch 直播嵌入到自有網頁
本文快速介紹如何實作嵌入 Twitch 直播內容到個人網頁上,並附上範例及實際效果
讀者可在自己網站,簡單隨意地鑲嵌 Twtch Live Stream,完全免費鑲嵌語法操作說明
目前鑲嵌 Twitch 直播最簡單的方式就是用 iframe
如果只是想試試效果,最低限度只要寫以下內容就能測試:
<iframe
src="https://player.twitch.tv/?channel=你的頻道名稱&parent=你的網站網址"
height="480"
width="320"
frameborder="1"
scrolling="no"
allowfullscreen="no">
</iframe>
你也可以填寫別人的頻道帳號名稱,圖奇在這方面沒有限制
parent:這代表你的網站網址域名,需要自行準備
需特別注意,這邊要求的網站網址域名必須具備:
1. https 連線,不可用 http
2. 網域名稱,你的網頁伺服器必須持有一串有效的對外網址,例如 www.google.com 這種,不能使用任何 IP 或 localhost
3. 憑證,一個能有效驗證你的網域名稱安全性的憑證,沒有的話需自行上網查如何在 Let's Encrypt 等機構線上申請一個
實際效果
以下是用知名部落格團隊域名 bynum5566.blogspot.com 來嘗試鑲嵌:
讀者可以試試看,有問題再提出
實際效果詳解
剛剛我們是在本篇文章網址 https://bynum5566.blogspot.com/2020/07/twitch.html 內測試
而我們實際下的參數是這樣:
<iframe
src="https://player.twitch.tv/?channel=thermaltakegaming&parent=bynum5566.blogspot.com"
height="480"
width="320"
frameborder="1"
scrolling="no"
allowfullscreen="no">
</iframe>
channel 隨便找的,不重要
parent 的部分,注意到我們下的參數是 bynum5566.blogspot.com
為什麼?
以下用表格分析各種情境的網址代表什麼意思:
網址 | 意義 |
bynum5566.blogspot.com/2020/07/twitch.html | 特定站點 blogspot.com 下 特定子網域 bynum5566 的 特定資料夾 /2020/07 內的 特定一篇文章 twitch.html 的詳細位址 |
bynum5566.blogspot.com | 特定站點 blogspot.com 下 特定子網域 bynum5566 的位址 |
blogspot.com | 特定站點 blogspot.com |
我們在下 domain 時,一定要抓緊,這是代表一個網站位址的重點
blogspot.com 是一個相當龐大的網站體系,甚至我們無法把它當作單一網站來看待,例如 blogspot.com/about 會導到 blogger.com 服務的入口網頁,其中可以再深入進行註冊、登入等服務
而 bynum5566.blogspot.com 比較接近我們常識所認知的「一個網站」,也是本次介接的重點, 這樣「一個網站」是作為獨立主體所存在,其轄下各個頁面檔案放置在不同資料夾中:
https://bynum5566.blogspot.com/2020/07/redmine-3000.html
https://bynum5566.blogspot.com/2020/07/twitch.html
redmine-3000.html、twitch.html 都是 html 檔案,而一起被放在 /2020 這個資料夾中的 /07 這個資料夾內
至於前面的知名部落格經營團隊名稱 bynum5566,在這串網址中代表的意義是「子網域」
你各位可以想像,一台網站伺服器所費不貲,如果只用來架前面說的「一個網站」,那非常浪費且不符合現代企業所要求的效益...(除非您架設的是像 bynum5566.blogspot.com 這樣兼具流量與品質的優質網站,但這很難)
因此,常見的作法是在一個主體母域名(blogspot.com)下切割出個別的子網域(例如 bynum5566),來當作獨立網站使用。之後銜接起來的整串網址 bynum5566.blogspot.com 就能代表「一個網站」所使用
註:也有把子資料夾切割出來當作獨立網站的做法,故上述是以現有例子說明,並非放諸四海皆須照此標準,但 blogspot 的作法算是相當常見,可放心理解為一種常見模式
回到 Twitch 的介接應用,Twitch 要求的是一個網站的 domain,所以需接上 bynum5566.blogspot.com 這樣的獨立網站網址
往內來說,在該網站轄下,無論哪個資料夾、哪個 html 檔案,想要放上我剛剛撰寫的實測 iframe code,都是可以適用的,無須一再重寫
往外來說,假設今天有一獨立網站 test.blogspot.com。即便一樣位於 blogspot.com 內,由於子網域已切開,所以無法貼上剛剛的 code 作使用
Twitch 要求一個獨立網站的 https domain,只要其有效且具備憑證,就能成功操作
希望在嵌入語法時,也能幫助各位對網站原理有更深一層認識
謝謝大家
沒有留言:
張貼留言