動態變更HTML5 中的視訊來源
問題：
問題：
時視訊播放器會發生故障。
解決方案：
const video = document.querySelector('video');
// Check browser support for video formats
const supportedFormat = video.canPlayType('video/mp4') ? 'mp4' : 'webm';
// Set video source based on supported format
video.src = `my-video.${supportedFormat}`; 登入後複製
要解決此問題，而不是使用多個
標籤和 load() 方法。標籤，您可以使用 canPlayType() 函數確定適當的視訊文件，並設定 的 src 屬性。直接標記。 const video = document.querySelector('video');
const playlist = ['video1.mp4', 'video2.webm', 'video3.mp4'];
// Current video index
let currentVideoIndex = 0;
// Function to load and play the next video in the playlist
const loadNextVideo = () => {
if (currentVideoIndex < playlist.length) {
const videoPath = playlist[currentVideoIndex];
video.src = videoPath;
video.load();
video.play();
currentVideoIndex++;
} else {
// Playlist completed, handle accordingly
}
};
// Event listener for onended event
video.addEventListener('ended', loadNextVideo); 登入後複製
這種方法消除了對多個 的需要。標籤並確保跨各種瀏覽器的兼容性。以下用一個例子來說明動態來源變化：透過動態改變 src 屬性，使用事件監聽器控製播放列表，可以實現無縫播放，無需依賴 Flash 或外部播放器。這種方法在管理影片內容方面提供了更大的控制力和靈活性。 以上是如何動態更改 HTML5 中的視訊來源以實現無縫播放清單播放？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
