視頻做網(wǎng)站背景兼容iso設(shè)備
2024-05-19 加入收藏
要在視頻加載時(shí)顯示一張圖片，通?？梢允褂?<video> 元素的 poster 屬性。這個(gè)屬性可以指定一個(gè)圖片的 URL，在視頻加載之前或在用戶點(diǎn)擊播放按鈕之前顯示。這樣，用戶在等待視頻加載時(shí)會(huì)看到指定的圖片。
下面是修改后的代碼，添加了 poster 屬性：
html復(fù)制代碼<!-- 視頻元素，指定了 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 標(biāo)簽，則顯示該文本 -->
Your browser does not support the video tag.</video><script>
// 獲取視頻元素
var video = document.getElementById("bg-video"); // 監(jiān)聽頁面加載完成事件
window.onload = function() { // 檢測用戶代理是否為 iOS 設(shè)備
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
// 如果是 iOS 設(shè)備
if (iOS) { // 暫停視頻播放
video.pause(); // 監(jiān)聽用戶觸摸事件
document.addEventListener("touchstart", function() { // 用戶觸摸屏幕后開始播放視頻
video.play();
});
}
};</script>在這個(gè)示例中，我添加了一個(gè) poster 屬性，并指定了一張圖片的 URL（假設(shè)為 video-poster.jpg），用作視頻加載時(shí)的顯示內(nèi)容。這樣，在視頻加載期間，用戶會(huì)看到這張圖片，直到視頻準(zhǔn)備好播放或用戶進(jìn)行交互。