視頻做網站背景兼容iso設備
2024-05-19 加入收藏
要在視頻加載時顯示一張圖片，通常可以使用 <video> 元素的 poster 屬性。這個屬性可以指定一個圖片的 URL，在視頻加載之前或在用戶點擊播放按鈕之前顯示。這樣，用戶在等待視頻加載時會看到指定的圖片。
下面是修改后的代碼，添加了 poster 屬性：
html復制代碼<!-- 視頻元素，指定了 poster 屬性 --><video autoplay muted loop playsinline id="bg-video" poster="video-poster.jpg">
<!-- 提供不同格式的視頻源 -->
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<!-- 如果瀏覽器不支持 video 標簽，則顯示該文本 -->
Your browser does not support the video tag.</video><script>
// 獲取視頻元素
var video = document.getElementById("bg-video"); // 監(jiān)聽頁面加載完成事件
window.onload = function() { // 檢測用戶代理是否為 iOS 設備
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
// 如果是 iOS 設備
if (iOS) { // 暫停視頻播放
video.pause(); // 監(jiān)聽用戶觸摸事件
document.addEventListener("touchstart", function() { // 用戶觸摸屏幕后開始播放視頻
video.play();
});
}
};</script>在這個示例中，我添加了一個 poster 屬性，并指定了一張圖片的 URL（假設為 video-poster.jpg），用作視頻加載時的顯示內容。這樣，在視頻加載期間，用戶會看到這張圖片，直到視頻準備好播放或用戶進行交互。