方法一

要實現視頻被播放過后本地有緩存，下次播放無需網絡即可播放，你可以利用瀏覽器的本地存儲功能（如localStorage或IndexedDB）來實現。

你可以在視頻播放結束時，將視頻的URL以及相關信息存儲在本地存儲中。然后，在下次需要播放視頻時，首先檢查本地存儲中是否存在該視頻的緩存，如果存在則直接使用本地緩存的視頻文件進行播放，而不是通過網絡請求獲取視頻文件。

這里是一個簡單的示例代碼，以localStorage為例：

// 在視頻播放結束時保存視頻信息到本地存儲
videoElement.addEventListener('ended', function() {localStorage.setItem('cachedVideoUrl', 'path_to_cached_video.mp4');
});// 在需要播放視頻時，檢查本地存儲中是否有緩存，如果有則使用緩存的視頻文件
let cachedVideoUrl = localStorage.getItem('cachedVideoUrl');
if (cachedVideoUrl) {videoElement.src = cachedVideoUrl;
} else {// 從網絡加載視頻videoElement.src = 'path_to_original_video.mp4';
}

在實際應用中，你還需要處理一些額外的情況，比如緩存過期、更新緩存等，以確保用戶始終能夠正常播放視頻。同時，你也可以考慮使用服務工作線程來管理視頻的緩存，這樣可以更好地控制緩存策略。

方法二

使用瀏覽器的 Cache API 來實現視頻的緩存。通過在用戶訪問視頻時將視頻文件保存在緩存中，下次用戶再次訪問相同的視頻時可以直接從緩存中加載，而無需再次請求網絡

// 檢查瀏覽器是否支持 Cache API
if('caches' in window) {// 打開一個名為 videoCache 的緩存caches.open('videoCache').then((cache) => {// 檢查緩存中是否已經有該視頻文件cache.match('video.mp4').then((response) => {if(response) {// 如果緩存中存在該視頻文件，直接從緩存中獲取response.blob().then((blob) => {let videoUrl = URL.createObjectURL(blob);// 將 videoUrl 設置為視頻播放源videoElement.src = videoUrl;});} else {// 如果緩存中不存在該視頻文件，從網絡請求并存儲到緩存中fetch('video.mp4').then((response) => {if(response.ok) {cache.put('video.mp4', response.clone());// 將 response 設置為視頻播放源videoElement.src = URL.createObjectURL(response);}});}});});
}

我們首先檢查瀏覽器是否支持 Cache API，然后打開一個名為 videoCache 的緩存。接著檢查緩存中是否有視頻文件，如果有則直接從緩存中獲取視頻文件進行播放；如果沒有，則從網絡請求視頻文件并存儲到緩存中，然后再進行播放。
請注意，使用 Cache API 需要考慮到緩存策略、緩存更新等問題，以保證視頻緩存功能的穩(wěn)定和可靠性