打鬼筆記|Youtube Iframe Player API筆記

更新於 發佈於 閱讀時間約 6 分鐘

因為要把網站原先使用的影音平台換成youtube,再加上網站內本來就有建立好一些功能,所以目標是用原本的架構無痛轉移

網站內原有功能>>

1.影片未看完但離開頁面或重新整理頁面時會出現alert提醒

2.影片播完後出現謝謝觀賞的alert提示

進行步驟>>

1.先在網頁載入YouTube IFrame Player API

<!-- 影片放置的區域-->
<div id="player"></div>
<!-- include Youtube Iframe Player API -->
<script src="https://www.youtube.com/iframe_api"></script>


2.寫javascript

  var player;
var hasFinished = false; // 用來追蹤影片是否播放完畢

function onYouTubeIframeAPIReady() {
// 影片的id寫在js裡
player = new YT.Player('player', {
height:'390', // 高度預設值為390 css會調成responsive
width: '640', // 寬度預設值為640 css會調成responsive
videoId: '貼上要顯示的Youtube影片id', //從資料庫帶出youtube video id
events: { //事件
'onStateChange': onPlayerStateChange
}
});
}


3.加入監聽(離開頁面&撥放器變化)

//監聽播放器狀態變化
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.ENDED) {
alert('播放完畢');
hasFinished = true; // 影片播放完畢
}
}
//當使用者嘗試離開頁面時觸發
window.addEventListener('beforeunload', (event) => {
// 如果影片未播放完畢
if (!hasFinished) {
event.preventDefault(); // 阻止默認行為(部分瀏覽器要求這行)
}
});


📝在改寫javascript時,因為要帶入的影片id是從資料庫抓取的,所以先設了變數並且用雙引號讓id型態為字串

var myVideoId = "<?php echo htmlspecialchars($row_content01['h04'], ENT_QUOTES, 'UTF-8'); ?>" //須為字串
//htmlspecialchars() =>避免帶入的值有特殊字元造成混淆或XSS攻擊

function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height:'390',
width: '640',
videoId: myVideoId, //從資料庫帶出youtube video id
events: {
'onStateChange': onPlayerStateChange
}
});
}


📝測試影片可以順利播放後,因為不想要播放結束後出現推薦影片,所以增加了關閉推薦影片&不自動播放的條件。

function onYouTubeIframeAPIReady() {
myVideo = new YT.Player('myVideo', {
height: '390',
width: '640',
videoId: myVideoId,
playerVars: { //用playerVars來設定播放器的行為
rel: 0, // 關閉推薦影片 畫面呈現封面圖
autoplay: 0, // 不自動播放
},
events: {
'onStateChange': onPlayerStateChange
}
});
}


參考資料:

Youtube IFrame Player API

前端工程師 August 的學習筆記-Youtube Iframe API 常用功能

ChatGPT



留言
avatar-img
留言分享你的想法!
avatar-img
平凡人的平凡人生
0會員
3內容數
我是ふふ,這裡記錄平凡的日常
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
YouTube自動最高畫質音質播放影片音樂的教學 Improve YouTube! CHROME瀏覽器插件 飛鳥電腦-台北市/新北市電腦筆電到府維修 電腦重灌 電腦組裝 網路維修LINE ID 『 @mvn8521y 』
Thumbnail
YouTube自動最高畫質音質播放影片音樂的教學 Improve YouTube! CHROME瀏覽器插件 飛鳥電腦-台北市/新北市電腦筆電到府維修 電腦重灌 電腦組裝 網路維修LINE ID 『 @mvn8521y 』
Thumbnail
大多數人瀏覽 Youtube 影片,都曾想將影片下載下來。不管是爲了離綫觀看,還是爲了自己備課,作業ppt,或者做工作簡報等。所以選擇一個靠譜的YouTube下載工具很關鍵。
Thumbnail
大多數人瀏覽 Youtube 影片,都曾想將影片下載下來。不管是爲了離綫觀看,還是爲了自己備課,作業ppt,或者做工作簡報等。所以選擇一個靠譜的YouTube下載工具很關鍵。
Thumbnail
這篇文章將教您如何在WordPress網頁上連接YouTube視頻,提升訪客留存時間,提供更生動的內容並增加社交分享。分為三個步驟:在YouTube上上傳視頻、從YouTube獲取嵌入代碼和在網站上嵌入YouTube視頻。
Thumbnail
這篇文章將教您如何在WordPress網頁上連接YouTube視頻,提升訪客留存時間,提供更生動的內容並增加社交分享。分為三個步驟:在YouTube上上傳視頻、從YouTube獲取嵌入代碼和在網站上嵌入YouTube視頻。
Thumbnail
透過案例分析,探討舊網站改版的必要性和目標,以及成功改版的關鍵包括網站設計、功能優化、SEO優化、響應式設計和內容優化。
Thumbnail
透過案例分析,探討舊網站改版的必要性和目標,以及成功改版的關鍵包括網站設計、功能優化、SEO優化、響應式設計和內容優化。
Thumbnail
〈未登入者乾淨首頁:YouTube對你的一種新理解與互動嘗試〉
Thumbnail
〈未登入者乾淨首頁:YouTube對你的一種新理解與互動嘗試〉
Thumbnail
因應今(2024)年 Google Podcast 結束服務,原用戶收聽 Podcast 需轉移至 YouTube Music 或是 YouTube。 不過礙於流程上沒有很順利(原本去年就應該搬到 YouTube 上),所以作為 YouTube 新手,特別寫一篇文章來分享如何從 YouTube 後
Thumbnail
因應今(2024)年 Google Podcast 結束服務,原用戶收聽 Podcast 需轉移至 YouTube Music 或是 YouTube。 不過礙於流程上沒有很順利(原本去年就應該搬到 YouTube 上),所以作為 YouTube 新手,特別寫一篇文章來分享如何從 YouTube 後
Thumbnail
YouTube 最新更新了兩個功能,其中包括長按兩倍速功能和商品功能的推出。長按兩倍速功能讓觀眾可以快速觀看影片,節省時間;而商品功能則讓觀眾可以直接在 YouTube 上購買商品。這些更新顯示了 YouTube 向中國網路平臺學習的趨勢,值得持續關注!
Thumbnail
YouTube 最新更新了兩個功能,其中包括長按兩倍速功能和商品功能的推出。長按兩倍速功能讓觀眾可以快速觀看影片,節省時間;而商品功能則讓觀眾可以直接在 YouTube 上購買商品。這些更新顯示了 YouTube 向中國網路平臺學習的趨勢,值得持續關注!
Thumbnail
在當今數位時代,YouTube已成為許多人每日不可或缺的影片平台。不論你是在追蹤你最喜愛的內容創作者、學習新技能,或是探索各種娛樂資訊,YouTube提供了無盡的可能性。然而,要充分利用YouTube的潛力,僅僅只是點擊播放按鈕是遠遠不夠的。
Thumbnail
在當今數位時代,YouTube已成為許多人每日不可或缺的影片平台。不論你是在追蹤你最喜愛的內容創作者、學習新技能,或是探索各種娛樂資訊,YouTube提供了無盡的可能性。然而,要充分利用YouTube的潛力,僅僅只是點擊播放按鈕是遠遠不夠的。
Thumbnail
許多YouTube頻道主都希望自己的影片,不論是在Google上或在YouTube上,都可以有很多網友搜尋到,然後點進去觀看。但是要獲取這種流量的做法,變得跟2021年以前不太一樣了。
Thumbnail
許多YouTube頻道主都希望自己的影片,不論是在Google上或在YouTube上,都可以有很多網友搜尋到,然後點進去觀看。但是要獲取這種流量的做法,變得跟2021年以前不太一樣了。
Thumbnail
在過去這段時間,我對Youtube有些抱怨,但是我決定把這個點子丟出來,並不是因為我覺得全世界最大的影音網站為什麼連這種事都做不好(好吧,也許有一點),而是另一方面的問題:我從前因為觀看了某些Youtuber造就了今天他們可為此工作,為什麼現在即便他們帳號旁邊有官方認證,卻要受演算法的苦?
Thumbnail
在過去這段時間,我對Youtube有些抱怨,但是我決定把這個點子丟出來,並不是因為我覺得全世界最大的影音網站為什麼連這種事都做不好(好吧,也許有一點),而是另一方面的問題:我從前因為觀看了某些Youtuber造就了今天他們可為此工作,為什麼現在即便他們帳號旁邊有官方認證,卻要受演算法的苦?
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News