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

Posted 2023-05-07

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

【英文标题】：How to target "hidden" iframes? (application: links to starting positions of a "poster image hidden"-embedded Youtube video)

【发布时间】：2015-03-16 19:56:02

【问题描述】：

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

---

尊敬的 *** 社区的人们，

应用程序

我有一个 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。

【问题讨论】：

那么，那个是什么意思？您是希望 data-time = "end" 让视频结束，还是要指定 data-time-end=80 来命令视频在那里停止？

我只是为了让 linked ...href...data-time=... 视频 fragment 停在那里，我并不是要修剪 complete 视频文件/流。

好吧，我使用了 &end 原生 youtube api，所以这里是 fiddle。再次，检查一下，随意批评，如果一切都好，我会详细说明答案（可能会稍微完善一下，看起来很粗糙）。

谢谢，停止时间在进度条中显示为括号]，但似乎还没有真正停止。 --- 在 Chrome 和 Safari 中我可以，但在 Firefox 中，我无法播放视频。 --- 我想还有什么是不可避免的，当您在进度条上单击/滚动视频时，&end 将停止“活动”？但我想没有简单的解决方法。 --- 感谢您的帮助，但我实际上指的是 不同 &end's，特定于每个 ...href...data-time=...。您认为这可能吗，而不是 整个 文件只有 1 个&end？

你的意思是你想要每个跳线都有一个数据端？ here。关于其他问题，这是 youtube 浏览器的问题，我们能做的不多，遗憾的是无法暂停视频，因为 youtube 本身不支持它。

【参考方案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;

希望对您有所帮助！

【讨论】：

回答和回答的行为比任何钻石都漂亮。我确信您在您的个人资料页面上为我们隐藏了一些珠宝，并且很想看到您的作品。

谢谢！很高兴我能帮上忙。