Question

因此，我想为我的iframe youtube视频提供一个替代方案，因此，如果该视频未加载互联网连接的cuz，它将从本地主机加载一个备用图片。

<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

我使用以下方法找到了一个简单的答案：

<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>

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

Answer 2

如果没有Internet连接，则不会加载该页面。因此，您不能使用alt=''或使用其他图片。抱歉! :(

iframe视频的替代图片

2 个答案: