JS 實現在指定的時間點播放列表中的影片

wgscd發表於2024-07-17
JS

為了實現在指定的時間點播放列表中的影片，你可以使用JavaScript中的setTimeout或setInterval結合HTML5的<video>元素。但是，由於你需要處理多個時間點，並且每個時間點播放不同的影片，使用setTimeout會更直接一些，因為你可以為每個時間點設定一個獨立的定時器。

以下是一個基本的實現思路：

定義一個影片列表，包含影片URL和播放時間點。
遍歷這個列表，為每個時間點設定setTimeout。
當定時器觸發時，檢查當前頁面上是否有正在播放的影片，如果有，則先暫停或停止它。
載入並播放指定時間點的影片。
這裡是一個簡單的示例程式碼：

html
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>Scheduled Video Player</title>  
</head>  
<body>  
<video id="videoPlayer" width="320" height="240" controls></video>  
  
<script>  
// 影片列表，包含URL和播放時間點（秒）  
const videoSchedule = [  
    { url: 'video1.mp4', time: 5 },  
    { url: 'video2.mp4', time: 15 },  
    { url: 'video3.mp4', time: 30 }  
];  
  
let currentVideo = null; // 當前播放的影片  
  
// 初始化影片播放器  
const videoPlayer = document.getElementById('videoPlayer');  
  
// 播放指定影片  
function playVideo(url) {  
    if (currentVideo) {  
        currentVideo.pause(); // 如果有正在播放的影片，先暫停  
        currentVideo.src = ''; // 清空影片源  
    }  
    videoPlayer.src = url; // 設定新的影片源  
    videoPlayer.play(); // 播放新影片  
    currentVideo = videoPlayer; // 更新當前播放的影片  
}  
  
// 遍歷影片列表，設定定時器  
videoSchedule.forEach(video => {  
    setTimeout(() => {  
        playVideo(video.url);  
    }, video.time * 1000); // 將秒轉換為毫秒  
});  
  
</script>  
</body>  
</html>
注意：

示例中的video1.mp4、video2.mp4和video3.mp4需要替換為實際的影片檔案URL。
videoPlayer.src = ''; 這行程式碼用於清空影片源，這樣可以確保當新影片開始播放時，舊的影片內容不會殘留在播放器中。但這種方法在某些瀏覽器中可能不是必需的或可能不起作用，具體取決於瀏覽器的實現。
示例中使用了controls屬性在<video>標籤中，這樣使用者就可以手動控制影片的播放。如果你不需要這些控制元件，可以移除controls屬性。
請確保你的網頁有權訪問這些影片檔案，特別是如果它們託管在不同的域上，你可能需要處理跨域資源共享（CORS）問題。

　　

相關文章