英文:
Multiple Iframe trigger play()
问题
我有多个页面上的iframe Vimeo视频。每个视频都有一个带有播放图标的图像封面，用于隐藏默认播放器。当用户点击封面时，封面会淡出并播放视频。
我的代码只在页面上有一个iframe时才能工作。如果页面上有两个或更多个iframe，则会失败。
iframe的HTML：
<div class="o-iframe">
<div class="o-iframe__wrapper">
<div class="o-iframe__cover js-iframe-cover">
<div class="o-iframe__cover-icon"></div>
</div>
<iframe class="o-iframe__element js-iframe" width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
JS代码：
if (document.querySelector('.js-iframe')) {
var video = new Vimeo.Player(document.querySelector('.js-iframe'));
var videoCover = document.querySelector('.js-iframe-cover');
videoCover.addEventListener('click', function() {
videoCover.style.opacity = '0';
video.play();
});
videoCover.addEventListener('transitionend', function() {
this.remove();
});
}
谢谢。
英文:
I've multiple iframe Vimeo videos on the same page. Each video has an image cover with a play icon to hide the default player. When the user click the cover, the cover fade out and play the video.
My code works only if there is one iframe per page. It fails if there is two or more iframe per page.
The HTML for the iframe:
<div class="o-iframe">
<div class="o-iframe__wrapper">
<div class="o-iframe__cover js-iframe-cover">
<div class="o-iframe__cover-icon"></div>
</div>
<iframe class="o-iframe__element js-iframe" width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
The JS:
if (document.querySelector('.js-iframe')) {
var video = new Vimeo.Player(document.querySelector('.js-iframe'));
var videoCover = document.querySelector('.js-iframe-cover');
videoCover.addEventListener('click', function() {
videoCover.style.opacity = '0';
video.play();
});
videoCover.addEventListener('transitionend', function() {
this.remove();
});
}
Thank you.
答案1
得分: 1
I'll provide the translation for the code portion as requested:
querySelectorAll 和 ***forEach*** 是关键。在页面上选择所有 `class="o-iframe"` 元素。在每个函数内部，使用 `elOIframe.querySelector()` 来选择后代元素。
<!-- language: lang-js -->
document.querySelectorAll('.o-iframe').forEach(elOIframe => {
const elCover = elOIframe.querySelector('.js-iframe-cover');
const elIframe = elOIframe.querySelector(".js-iframe");
const video = new Vimeo.Player(elIframe);
elCover.addEventListener('click', function() {
elCover.style.opacity = '0';
video.play();
});
elCover.addEventListener('transitionend', function() {
elCover.remove();
});
});
<!-- language: lang-html -->
<div class="o-iframe">
<div class="o-iframe__wrapper">
<div class="o-iframe__cover js-iframe-cover">
<div class="o-iframe__cover-icon"></div>
</div>
<iframe class="o-iframe__element js-iframe" width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<!-- 还有其他许多 <div class="o-iframe"> 元素 -->
<!-- end snippet -->
Please note that the HTML content remains unchanged in this translation.
英文:
querySelectorAll and forEach is the key here. Target every class="o-iframe" elements on the page. Inside the each function target the descendants using elOIframe.querySelector()
<!-- language: lang-js -->
document.querySelectorAll('.o-iframe').forEach(elOIframe => {
const elCover = elOIframe.querySelector('.js-iframe-cover');
const elIframe = elOIframe.querySelector(".js-iframe");
const video = new Vimeo.Player(elIframe);
elCover.addEventListener('click', function() {
elCover.style.opacity = '0';
video.play();
});
elCover.addEventListener('transitionend', function() {
elCover.remove();
});
});
<!-- language: lang-html -->
<div class="o-iframe">
<div class="o-iframe__wrapper">
<div class="o-iframe__cover js-iframe-cover">
<div class="o-iframe__cover-icon"></div>
</div>
<iframe class="o-iframe__element js-iframe" width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<!-- and many other <div class="o-iframe"> here -->
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论