因為要把網站原先使用的影音平台換成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
}
});
}
參考資料：
前端工程師 August 的學習筆記-Youtube Iframe API 常用功能
ChatGPT
