代码之家 › 专栏 › 技术社区 › Tareq Jami

iFrame视频的备选图像

alt youtube iframe html javascript

1

Tareq Jami · 技术社区 · 6 年前

所以我想为我的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>

有人能帮我吗?

2 回复 | 直到 6 年前

1

0

Tareq Jami 6 年前

我用这个找到了一个简单的答案:

<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连接。如果它处于脱机状态,视频源将被删除,您将只能看到背景图像(自定义错误页),并且如果在加载该页后Internet连接关闭或打开,事件侦听器将再次检查联机/脱机状态并进行正确的更改。

2

-1

Rojo 6 年前

如果没有Internet连接,页面将无法加载。所以,你不能用 alt='' 或者换个形象。对不起的!:(