iframe 视频的替代图像答案

【问题标题】：Alternative image for iframe videoiframe 视频的替代图像
【发布时间】：2019-05-03 12:33:20
【问题描述】：

所以我想为我的 iframe youtube 视频提供一个替代方案，所以如果视频没有加载互联网连接，它应该从 localhost 加载一个替代图像。

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

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

【问题讨论】：

如果没有互联网连接，页面或页面中的图像将如何加载？这是在注册了 serviceworker 的 PWA 中吗？你还试过什么？
How to use alt image on iframe tag?的可能重复
@charlietfl 它只是一个网络应用程序，视频是唯一需要互联网连接的东西，其余文件从 html/js/css 文件所在的根/文件夹加载.因此，如果由于 Internet 无法显示视频，我想显示图像
@weibenfalk 不完全是。好吧，假设我不想在 iframe 中收到 404 或 200 或没有 Internet 连接错误，而是要加载自定义错误图像

标签： javascript html iframe youtube alt

【解决方案1】：

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

【讨论】：

没有 alt 属性
嗯，你检查得怎么样了？无论如何，如果互联网无法正常工作，则会出现“无互联网”错误页面

【解决方案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>

一旦页面加载，这首先检查是否有互联网连接。如果它离线，视频源将被删除，您将只能看到背景图像（自定义错误页面），如果互联网连接在加载页面后关闭或打开，事件侦听器将再次检查在线/离线状态并做出正确的改变。

【讨论】：

这将如何在移动设备上工作，连接已打开，但在 DIV 中在后台自动播放的 iframe 容器视频被阻止？