PM: RD大大，客戶又有一個神奇的需求
我: (`・ω・´)
PM: 就是希望在前台嵌入Youtube影片，影片播放完畢要做統計
我: ┳━┳ノ( OωOノ) 好...我來研究
我們都知道Youtube可以用iframe嵌入影片，那問題是怎麼知道他已經撥放完畢了?
經爬文後才知道，只能使用youtube_iframe_api 透過載入script來實現，普通的iframe做不到(就算用MutationObserver監聽屬性也無效)
文件: https://developers.google.com/youtube/player_parameters?hl=zh-tw
當前端能實現監聽YT影片撥放完畢之後就是靠API統計資料了~(就看客戶想統計規則和頻率)
讀者們可以撥放 "進階" 的影片，看看撥放完畢後的效果
demo網頁
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Embed YouTube Video Demo</title>
</head>
<body>
<h2>普通</h2>
<iframe
id="ytplayer"
type="text/html"
width="320"
height="180"
src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"
frameborder="0"
></iframe>
<hr />
<h2>進階</h2>
<div id="myYTplayer" class="film"></div>
<script>
let player;
function onYouTubeIframeAPIReady() {
player = new window.YT.Player("myYTplayer", {
height: "360",
width: "640",
videoId: "lg5WKsVnEA4", // 在此替換成你要播放的影片ID (只能是影片 非short)
playerVars: {
autoplay: 1, //自動撥放
controls: 1, //播放器控制項
fs: 0, //fullscreen 縮寫
rel: 0, // 影片結束後不顯示推薦影片
},
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange,
},
});
}
// 監聽播放狀態變更事件
function onPlayerStateChange(event) {
console.log(event.data, YT.PlayerState);
if (event.data === YT.PlayerState.ENDED) {
// 播放完畢時觸發
alert("播放完畢");
}
}
function onPlayerReady(event) {
}
</script>
<script src="https://www.youtube.com/iframe_api"></script>
</body>
</html>
載入 YT iframe_api 後要知道幾件事情
new window.YT.Player(`$標籤id字串`, `$參數`)
$參數重點講解我認為重要的playerVars
若全域宣告一個方法window.onYouTubeIframeAPIReady
在iframe_api載入完成後會馬上被呼叫
適合時機: 載入網站時馬上要動態生成嵌入的影片
不然其實點縮圖的時候再靠 click 事件產生就好
縮圖範例:
event.data會拿到影片狀態數字
這邊列出不同狀態的意思
YT.PlayerState = {
"UNSTARTED": -1, //未開始
"ENDED": 0, //撥放完畢
"PLAYING": 1, //撥放中
"PAUSED": 2, //暫停
"BUFFERING": 3, //載入中
"CUED": 5 //影片被指派或載入後，尚未開始播放
}
影片載入好觸發
如果希望在影片載入好，馬上關閉聲音可以這樣寫:
function onPlayerReady(event) {
event.target.mute();
}
影片縮圖可以使用 https://i.ytimg.com
參考:
https://electrify.tw/archives/355/youtube-thumbnail-downloader/
iThome鐵人賽
看影片追技術