因此，我想为iframe youtube视频提供一个替代方案，因此，如果该视频未加载互联网连接的cuz，则它将从本地主机加载alt图像。
<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>有人可以帮我这个忙吗？
最佳答案
我使用以下方法找到了一个简单的答案:
<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>
页面加载后，这首先检查是否有Internet连接。如果离线，则视频源将被删除，并且您将只能看到背景图片(自定义错误页面)，并且在加载页面后，如果互联网连接处于打开或关闭状态，事件监听器将再次检查在线/离线状态并进行正确的更改。
关于javascript - iframe视频的替代图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53573018/