视频做网站背景兼容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"); // 监听页面加载完成事件
window.onload = function() { // 检测用户代理是否为 iOS 设备
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
// 如果是 iOS 设备
if (iOS) { // 暂停视频播放
video.pause(); // 监听用户触摸事件
document.addEventListener("touchstart", function() { // 用户触摸屏幕后开始播放视频
video.play();
});
}
};</script>在这个示例中，我添加了一个 poster 属性，并指定了一张图片的 URL（假设为 video-poster.jpg），用作视频加载时的显示内容。这样，在视频加载期间，用户会看到这张图片，直到视频准备好播放或用户进行交互。