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

好吧，我们来了！小提琴。

.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() 方法添加到页面中的 load 事件中，这将确保我们所有的立面和跳线在执行任何操作之前都已启动并运行。

• initVideoFacade()方法将找到所有跳线和立面，并使用setUpFacade()和setUpJumper()方法对其进行设置。

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

• jumpTo()方法将使用几个regular expressions更新 iframe 的 src(如果视频未播放，则更新外观初始数据(，以替换 iframe src 的&start=和&end=部分。

• 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;
}

希望它有帮助！