如何定位“隐藏”的 iframe？ （应用程序：链接到“隐藏的海报图像”嵌入的 Youtube 视频的起始位置）

Question

元： 关于本地存储的 A/V 文件的类似问题可以在这里找到：Clickable "positioning" hyperlinks to A/V (locally stored on your website and “hidden” behind a poster image)。

---

尊敬的 Stackoverflow 社区的人们，

应用程序

我有一个 iframe <iframe name="video"..。命名为video，将被视为某个视频的“主播放器”。

由于我还无法获得该视频的交互式文字记录，因此我使用：<a href="//www.youtube.com/embed/...&start=60" target="video">1:00</a> 来调用视频中的不同播放/开始位置，例如第二个 60。

当<iframe name="video".. 已经“活动”时，这可以正常工作：然后链接会在 iframe 内移动视频的播放位置。这太棒了！

但是，当<iframe name="video".. 尚未“激活”时，它不工作正常，就是这种情况：然后链接会在不同的浏览器选项卡中打开，而不是在iframe（或 iframe 应该显示的位置）。

我所说的隐藏是什么意思

iframe 不“活跃”的意思如下：它通过以下代码“隐藏”在“海报图像”后面：

<div onclick="play();" id="vid" style="...; background: ... url('...poster.image.url...') no-repeat center;-webkit-background-size: cover; ...;overflow:hidden"></div>

<script type="text/javascript">function play(){document.getElementById('vid').innerHTML = '<iframe name="video" ... src="//www.youtube.com/embed/...?&...start=0"></iframe>';}</script>

---

换句话说：我特别不想要“<a target="_blank"”-行为。我猜target="video" 现在不能正常工作，因为 iframe 被“隐藏”在海报图片后面。

我确信当 iframe 根本不隐藏时不会发生这种行为。我对此进行了多次测试。此外，利用当前的“隐藏”海报功能，当首先点击海报图片时（在点击<a href="...></a> 之前），这种行为也不会发生。

如果您想亲自查看此行为，可以在我的site 上查看。最好的方法是查看/CTRL-F 查找“stef”，然后打开 ▾̲ ̲u̲n̲d̲e̲r̲l̲i̲n̲e̲d̲ ̲t̲o̲g̲g̲l̲e̲，您会在那里找到。

那么如何在不打开新的浏览器窗口/标签的情况下成功地“定位”“隐藏”iframe？

任何帮助将不胜感激。非常感谢，Vincent Verheyen。

Answer 1

好吧，我们来了！ fiddle。

HTML

您的 html 将包含外观和跳线来完成您的要求。

    什么是外观？

立面：“建筑物的主要正面，面向街道或开放空间。”

这将是您播放视频或单击任何跳线之前显示的图像，其 html 将如下所示：

<div class="videoFacade" data-name="video1" data-video="ByJFdTFEwF4" data-start="8">
    <img src="http://i.imgur.com/xeUiWGn.png" />
</div>

    什么是跳线？

跳线是将 iframe 的 url 更新到视频中所需时间的锚点，它看起来像这样：

JavaScript

window.addEventListener("load", initVideoFacade);

function initVideoFacade() {
    var allFacades = document.querySelectorAll(".videoFacade");
    for (var i = 0; i < allFacades.length; i++) {
        var facade = allFacades[i];
        setUpFacade(facade);
    }

    var allJumpers = document.querySelectorAll(".videoJumper");
    for (var i = 0; i < allJumpers.length; i++) {
        var jumper = allJumpers[i];
        setUpJumper(jumper);
    }
}

function setUpJumper(jumper) {
    jumper.addEventListener("click", function (e) {
        e.preventDefault();
        jumpTo(jumper);
        var video = jumper.dataset.video;
        var facade = getFacadeByVideo(video);
        if (facade) playVideo(facade);
        return false;
    });
}

function setUpFacade(facade) {
    facade.addEventListener("click", function () {
        playVideo(facade);
    });
}

function getFacadeByVideo(video) {
    return document.querySelector(".videoFacade[data-name=" + video + "]");
}

function getIframeByVideo(video) {
    return document.querySelector(".videoIframe[data-name=" + video + "]");
}

function updateVideoSource(iframe, start, end) {
    var iframeSrc = iframe.src.replace(/start=[0-9]+/i, "start=" + start);
    var hasEnd = iframeSrc.indexOf("end") != -1;
    if (hasEnd) iframeSrc = iframeSrc.replace(/end=[0-9]+/i, "end=" + end);
    else iframeSrc += "&end=" + end;
    return iframeSrc;
}

function updateFacadeData(facade, start, end) {
    facade.setAttribute("data-start", start);
    facade.setAttribute("data-end", end);
}

function jumpTo(jumper) {
    var start = jumper.dataset.start;
    var end = jumper.dataset.end;
    var video = jumper.dataset.video;
    var iframe = getIframeByVideo(video);
    if (iframe) {
        var iframeSrc = updateVideoSource(iframe, start, end);
        iframe.src = iframeSrc;
    } else {
        var facade = getFacadeByVideo(video);
        updateFacadeData(facade, start, end);
    }
}

function playVideo(facade) {
    var start = facade.dataset.start || 0;
    var end = facade.dataset.end;
    var name = facade.dataset.name;
    var video = facade.dataset.video;
    var iframe = document.createElement("iframe");
    iframe.dataset.name = name;
    iframe.className = "videoIframe";
    var iframeSrc = "http://www.youtube.com/embed/" + video + "?&cc_load_policy=1&modestbranding=1&autoplay=1&rel=0&showinfo=0&theme=light&start=" + start;
    if (end) iframeSrc += "&end=" + end;
    iframe.src = iframeSrc;
    iframe.frameBorder = 0;
    replaceNode(facade, iframe);
}

function replaceNode(node1, node2) {
    var parent = node1.parentNode;
    var next = node1.nextSibling;
    parent.insertBefore(node2, next);
    parent.removeChild(node1);
}

这是一个时间表：

• 我们将initVideoFacade() 方法添加到页面中的加载事件中，这将确保我们所有的门面和跳线在执行任何操作之前都已启动并运行。

• initVideoFacade() 方法将查找所有跳线和外墙，并使用setUpFacade() 和setUpJumper() 方法进行设置。

• setUpJumper() 方法将在跳线上添加一个click event，并告诉它跳到视频中确定的时间，在跳线中指定。此外，如果视频尚未播放，它会立即播放。

• jumpTo() 方法将使用一对 regular expressions 替换 iframe 的 &start= 和 &end= 部分来更新 iframe 的 src（或外观初始数据，如果视频未播放）来源。

• setUpFacade() 方法将简单地播放视频，移除外观并插入 iframe。

• playVideo() 方法将从外观创建一个新的 iframe，替换它并将它的源、开始和结束时间分配给视频。

CSS

这只是处理外观和 iframe 的样式:)

.videoFacade, .videoIframe {
    position: relative;
    width: 360px;
    height: 202.5px;
    margin:5px;
}
.videoFacade {
    cursor: pointer;
    border:1px solid black;
}
.videoFacade img {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    margin: -25px 0 0 -25px;
}

希望对您有所帮助！