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

iFrame视频的备选图像

alt youtube iframe html javascript

Tareq Jami · 技术社区 · 7 年前

所以我想为我的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 回复 | 直到 7 年前

Tareq Jami 7 年前

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

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

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前