打鬼筆記｜Youtube Iframe Player API筆記

因為要把網站原先使用的影音平台換成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