iframe 视频的替代图像

Question

所以我想为我的 iframe youtube 视频提供一个替代方案，因此如果视频因互联网连接而无法加载，它将从本地主机加载替代图像。

<iframe width="95%" height="320" src="https://www.youtube.com/embed/OA318VbEhtc?&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

有人可以帮我解决这个问题吗？

Answer 1

如果没有 Internet 连接，页面将不会加载。因此，您不能使用 alt='' 或有替代图像。对不起！ :(

Answer 2

我找到了一个简单的答案，使用这个：

<html>
<head>
<script>            
function updateOnlineStatus() {
document.getElementById('video').src = "HERE COMES THE YT LINK";
document.getElementById('video').style.backgroundImage = "";
}

function updateOfflineStatus() {
document.getElementById('video').style.backgroundImage = "url(PATH TO A CUSTOM ERROR 
IMAGE)";
document.getElementById('video').src = "";
}

window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOfflineStatus); 

</script>
</head>
<body>
<iframe id="video" width="95%" height="320" frameborder="0" allowfullscreen></iframe>


<script>
if(navigator.onLine){
document.getElementById('video').src = "HERE COMES THE YT LINK";
document.getElementById('video').style.backgroundImage = "";
} else {
document.getElementById('video').style.backgroundImage = "PATH TO A CUSTOM ERROR 
IMAGE";
document.getElementById('video').src = "";
}
</script>

</body>
</html>

这会在页面加载后首先检查是否有互联网连接。如果它处于离线状态，视频源将被删除，您将只能看到背景图像（自定义错误页面），如果互联网连接在加载页面后断开或打开，事件监听器将检查 online/offline状态并进行正确的更改。

iframe 视频的替代图像

Alternative image for iframe video

html

javascript

youtube

iframe

alt