javascript - 如何删除 iframe 上的图像,播放?使用 JavaScript
问题描述
我尝试这样做,将图像放在 iframe 上,当我单击它时,我看到一个 gif 图像(上传),最后我用 JavaScript 显示 iframe,我尝试用这段代码来做,但我不能删除图像,它只保留gif图像。
我想做这样的事情:
<html>
<head>
<meta charset="UTF-8">
<meta name="googlebot" CONTENT="noindex" />
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
}
.container {
height: 100%;
overflow: auto;
}
.section {
position: relative;
width: 100%;
}
.section p {
margin: 0;
}
/* sizes */
.fit {
height: 100%;
}
.wide {
height: auto;
padding-top: 56.25%;
/* 9 / 16 = 0.5625 */
}
.wide .content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* centering */
.t {
display: table;
width: 100%;
height: 100%;
}
.tc {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.cargando {
color: #fff;
font-family: Arial;
position: relative;
font-size: 20px;
z-index: 1;
font-weight: bold;
top: 35%;
cursor: pointer;
}
.cargando img {
width: 150px;
height: 150px;
}
.theplayer {
z-index: 10000;
}
.play-background:hover {
transition: all .6s;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.play-background {
cursor: pointer;
}
iframe {
position:absolute;top:0;left:0;width:100%;height:100%;display: none; }
</style>
</head>
<body class="play-background">
<div class="container">
<div class="section fit">
<div class="t">
<div class="tc">
<div class="cargando">
<img class="load" style="display: none;" src="https://i.imgur.com/Be2Lu9R.gif"><img class="go-boton" src="https://sv.danimados.com/images/play_button.png"><div class="server">Servidor: <b>NeoPen-O-SV</b></div></div>
<iframe src="https://sendvid.com/embed/0bmbrf7a" width="100%" height="100%" z-index="1000" style="border: none"></iframe>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$( ".play-background" ).click(function() {
$(".go-boton").hide();
$(".load").show();
$(".theplayer").show();
$(this).removeClass("play-background");
});
</script>
</html>
正如我单击时所做的那样,我看到加载的 gif 图像,消失并显示 iframe。
解决方案
当 iframe 未完全加载时,应该会出现加载 gif。如果您的 iframe 加载速度较慢,那么加载 gif 是一件好事,但是以最小或没有延迟的 iframe 加载更好。
- 您的页面是否有多个 iframe?
- 如果是这样,您应该重新评估您的布局。iframe 是加载速度最慢的元素,渲染多个 iframe 会增加加载时间。
- 如果不是,您应该重新评估 iframe 本身的内容。如果内容是视频,请尝试使用其他服务上传和播放视频,例如 YouTube 或您自己的网站等。
- 您可以在 iframe 中编辑页面吗?
确定 iframe 已加载后,删除加载程序 gif 并显示播放按钮图像。
将点击事件委托给播放按钮图像,并让回调函数删除播放按钮图像并显示 iframe。
$(play-button-image).on('click', function(e) { $('iframe')[0].src = 'https://html5demos.com/assets/dizzy.mp4'; $(this).fadeOut().removeClass('active'); $('iframe, figcaption').fadeIn().addClass('active'); e.stopPropagation(); });
如果发生“双击”行为(前用户单击按钮一次并调用回调函数但很快对第二次幽灵单击做出反应),添加
e.stopPropagation();
到回调函数的末尾以防止事件冒泡触发任何其他注册的事件处理程序祖先标签。.active
添加/删除表示标签状态的特殊类(例如)(例如隐藏或显示)
- 应用一个类似的事件处理程序,它将删除 iframe 并显示播放按钮图像。在演示中,用户单击
figcaption.caption
(参见演示中的最后一个代码块)。
注意:在演示setTimeout()
中调用 a 来模拟 iframe 加载缓慢。此外,由于 SO 沙盒规则,某些功能被阻止(figcaption.caption
不显示、视频无响应等)。要使用完整功能运行,请将源代码复制并粘贴到文本文件中,使用.html
(alt .htm
) 扩展名保存到文件名,然后在浏览器中打开。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: rgba(0, 0, 0, 0.5);
}
main {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
margin: 5vh auto;
width: 100%;
height: 100%;
overflow: hidden;
}
.hframe {
margin: 0 auto;
padding-top: 56.25%;
width: 100%;
height: auto;
position: relative;
}
iframe {
min-width: 100%;
min-height: 100%;
position: absolute;
z-index: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
}
.hframe img {
width: 150px;
height: 150px;
position: absolute;
z-index: 0;
top: calc(50% - 75px);
left: calc(50% - 75px);
cursor: pointer;
}
.load:hover {
cursor: not-allowed;
}
.caption {
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
overflow: hidden;
text-align: center;
font: 100 small-caps 1.2rem/1.2rem Verdana;
color: cyan;
background: rgba(0, 0, 0, 0.2);
}
.go:hover,
.caption:hover {
transition: all .6s;
transform: scale(1.1);
cursor: pointer;
}
.active {
display: block !important;
z-index: 1000;
}
</style>
</head>
<body>
<main>
<figure class="hframe">
<img class="load active" src="https://i.imgur.com/Be2Lu9R.gif">
<img class="go" src="https://sv.danimados.com/images/play_button.png" style="display: none;">
<iframe src="" frameborder="0" allowfullscreen style="display: none;"></iframe>
<figcaption class='caption' style="display: none;"><a>Server: <b>NeoPen-O-SV</b></a></figcaption>
</figure>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(window).on('load', loading);
function loading(e) {
setTimeout(function() {
$('.load').fadeOut().removeClass('active');
$('.go').fadeIn().addClass('active');
}, 2500);
}
$('.go').on('click', function(e) {
$('iframe')[0].src = 'https://html5demos.com/assets/dizzy.mp4';
$(this).fadeOut().removeClass('active');
$('iframe, .caption').fadeIn().addClass('active');
e.stopPropagation();
});
$('.caption').on('click', function(e) {
$('iframe, .caption').fadeOut().removeClass('active');
$('.go').fadeIn().addClass('active');
$('iframe')[0].src = '';
e.stopPropagation();
});
</script>
</body>
</html>
推荐阅读
- python-3.x - Python:根据for循环迭代更改变量
- android - 在 linux 机器上同时使用 SCCCPY 和 React-Native
- javascript - Code is giving `null` error for a new window opened using JavaScript to close it
- go - Go import error: invalid version unknow revision
- c - 使用 C 创建二维数组/矩阵
- java - Google reCaptcha loading using BrowsermobProxy
- c - 将整数指针传递给函数时出现分段错误
- qt - 在 Qt::ToolButtonIconOnly 和 Qt::ToolButtonTextBesideIcon 之间切换时垂直 QToolbar 中图标的位置
- python - 跨文件访问私有属性 - 理解错误,Python 3.8.2
- python-3.x - how to compare to two json files and return a un matched key and value in object