如何删除iframe上的图像，使用JavaScript播放?

我尝试这样做，将图像放在iframe上，当我单击它时，我看到一个gif图像(上传)，最后我用JavaScript显示iframe，我尝试用这段代码来做，但我无法删除图像，它只是保留gif图像。

我想做这样的事情：

https://sv.danimados.com/gilberto.php?id=cHJsZ0MwWXFDb2h1eGJrcUI0WFlsWnYyN3puT1BzbWtqSDlrWlZ3R3BQNGI3V3RjOWNDZ3kwWStFVDVNQmx1Ng==&sv=UploadYour

<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 中的页面)之间建立通信。有关如何检测何时加载 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()来模拟 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>

如果我理解正确，您希望iframe前面的元素消失，然后删除类命令在脚本中不起作用。也许您引用了错误的对象来从中删除类？而不是$(this).removeClass("play-background")尝试$("body").removeClass("play-background")

相关内容

最新更新

热门标签：