video.onloadeddata?（）

video.onloadeddata?是 JavaScript 中用于監聽 HTML?<video>?元素?「當前幀數據已加載」?的事件處理器。當視頻的第一幀畫面數據加載完成（足以開始播放）時，會觸發此事件。

---

1. 基本用法

const video = document.querySelector('video');video.onloadeddata = function() {console.log('視頻第一幀已加載，可以播放了！');
};

• 觸發時機：

  • 視頻元數據（如分辨率、時長）和第一幀畫面加載完成。

  • 早于?oncanplay（可流暢播放的事件）。

• 用途：在視頻初始渲染時執行操作（如顯示封面、初始化播放器）。

---

2. 替代方案：addEventListener

推薦使用?addEventListener，避免覆蓋已有事件：

video.addEventListener('loadeddata', function() {console.log('視頻數據已加載');
});

---

3. 常見應用場景

① 顯示視頻封面（第一幀）

video.addEventListener('loadeddata', function() {const canvas = document.createElement('canvas');canvas.width = video.videoWidth;canvas.height = video.videoHeight;canvas.getContext('2d').drawImage(video, 0, 0);document.querySelector('.video-cover').appendChild(canvas);
});

② 初始化播放器狀態

video.addEventListener('loadeddata', function() {// 顯示自定義播放按鈕document.querySelector('.play-button').style.display = 'block';
});

③ 檢測視頻基礎信息

video.addEventListener('loadeddata', function() {console.log('視頻分辨率:', video.videoWidth, 'x', video.videoHeight);console.log('視頻時長:', video.duration);
});

---

4. 與其他視頻事件的區別

事件	觸發條件
onloadedmetadata	僅元數據（如時長、分辨率）加載完成，但畫面未加載。
onloadeddata	第一幀畫面加載完成，可顯示畫面但可能無法流暢播放。
oncanplay	已加載足夠數據可開始播放（但不保證不卡頓）。
oncanplaythrough	已加載足夠數據可流暢播放至結束（理想狀態）。

---

5. 注意事項

• 網絡環境影響：如果視頻文件較大或網絡慢，loadeddata?可能延遲觸發。

• 與preload屬性相關：若?<video preload="none">，需用戶交互后才會加載數據。

• 移動端兼容性：部分移動瀏覽器可能延遲加載數據以節省流量。

---

總結

video.onloadeddata?是視頻處理的基礎事件之一，適合在視頻畫面首次可用時執行初始化操作。若需更高兼容性，建議結合?loadedmetadata?和?canplay?事件使用。

video.ontimeupdate()

video.ontimeupdate()?是 JavaScript 中用于監聽 HTML?<video>?元素播放時間更新的事件處理器。當視頻播放時，只要當前播放位置（currentTime）發生變化，就會觸發該事件。

---

1. 基本用法

const video = document.querySelector('video');video.ontimeupdate = function() {console.log('當前播放時間:', video.currentTime);
};

• 觸發時機：視頻播放、用戶拖動進度條、跳轉時間點等。

• 用途：實時監測播放進度，用于更新進度條、顯示字幕、記錄觀看行為等。

---

2. 替代方案：addEventListener

更推薦使用?addEventListener，避免覆蓋已有事件：

video.addEventListener('timeupdate', function() {console.log('時間更新:', video.currentTime);
});

---

3. 常見應用場景

① 自定義進度條同步

video.addEventListener('timeupdate', function() {const progress = (video.currentTime / video.duration) * 100;document.querySelector('.progress-bar').style.width = `${progress}%`;
});

② 字幕/彈幕顯示

const subtitles = [{ time: 5, text: "第一句字幕" },{ time: 10, text: "第二句字幕" }
];video.addEventListener('timeupdate', function() {subtitles.forEach(item => {if (video.currentTime >= item.time && video.currentTime < item.time + 2) {document.querySelector('.subtitle').textContent = item.text;}});
});

③ 記錄觀看進度

video.addEventListener('timeupdate', function() {localStorage.setItem('videoProgress', video.currentTime);
});// 下次打開頁面時恢復進度
video.currentTime = parseFloat(localStorage.getItem('videoProgress')) || 0;

---

4. 注意事項

• 性能優化：timeupdate?觸發頻率較高（約每秒4-60次），避免在回調中執行復雜計算。

• 與seeked事件區別：seeked?僅在用戶手動跳轉后觸發，而timeupdate在播放過程中持續觸發。

---

總結

video.ontimeupdate?是控制視頻交互的核心事件之一，適用于進度跟蹤、動態內容加載等場景。推薦使用?addEventListener('timeupdate')?以保持代碼靈活性。