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

iFrame视频的备选图像

alt youtube iframe html javascript

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

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连接关闭或打开,事件侦听器将再次检查联机/脱机状态并进行正确的更改。

-1

Rojo 6 年前

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

推荐文章

jackar · 在有声音的视频上绕过chrome autopause?

6 年前

Edward Zion Saji · 使用python自动播放youtube结果中的第一个视频

6 年前

user2596635 · 静音YouTube视频和自动播放

6 年前

Abhilash Rathod · Youtube订阅按钮在Angular项目中不工作

6 年前

Arpit Gupta · 如何嵌入多个youtube音频

6 年前

user9594573 · AttributeError:“YouTube”对象没有属性“get\u videos”

6 年前

alfredmack · 在不提示用户登录的情况下将视频上载到youtube API V3

6 年前

Dhruv · 使用C查找视频是否可用,是否使用Selenium#

6 年前

Ben Muircroft · 要重定向的youtube/hooktube url。googlevideo url

6 年前

M. Arb · Youtube iframe如何全屏显示?

6 年前