Question

我不确定这是否是正确的地方，但是，我正在尝试实施类似于谷歌的Project Jacquard在本网站上所做的事情https://www.google.com/atap/project-jacquard/

正如您所看到的，有一个视频在后台自动播放（我没有使用 -

        <video autoplay loop controls muted id="bgvid">
            <source src="video/Jacquard.mp4" type="video/mp4"> //the video here is downloaded from Youtube
        </video>

这很好！

现在，还有一个名为“Play Film”的按钮，一旦点击就会在前景上启动类似的视频，并停止播放背景自动播放视频。前景中的视频是一个youtube iframe，当我输入时，嵌入在页面中，但我希望它只在播放“播放电影”按钮时播放/显示。

我一直在尝试在互联网上搜索如何实现这一点，但无法找到我正在寻找的确切内容。有人可以指出我正确的方向吗？

以下是包含该视频的部分，但我确信它不会有太多帮助

<iframe id="forPostyouradd" width="1349" height="600" src="https://www.youtube.com/embed/qObSFfdfe7I" frameborder="0" allowfullscreen></iframe>

<header class="header-image">
    <div class="headline" style="height: 850px;">

        <div class="container">
            <h2 style="padding-bottom: 20px;">Technology woven in.</h2>
            <button class="centerButton" onclick="postYourAdd()">Play Film</button>

        </div>

        <video autoplay loop controls muted id="bgvid">
            <source src="video/Jacquard.mp4" type="video/mp4">
        </video>

    </div>
</header>

和javascript代码 -

function postYourAdd () {
var iframe = $("#forPostyouradd");
iframe.attr("src", iframe.data("src"));

}

非常感谢任何帮助，非常感谢！

Answer 1

我首先使用position: absolute;为视频和iFrame设置样式，以确保它们相互重叠。我也隐藏了iFrame，因此用户在没有按下按钮的情况下也看不到它。

然后，唯一要做的就是按下按钮时播放视频。点击按钮后，我会更改src的{{1}}属性，以便视频在显示时开始播放。

请在此处查看：https://jsfiddle.net/h7v0e1ku/

为了使其过渡更加流畅，您可以使用iframe方法，如下所示：https://jsfiddle.net/cqLy3hz2/

<强> HTML

setTimeOut()

<强> CSS

<video class="vid" autoplay loop>
    <source src="video.mp4" type='video/mp4' />
    <img id="alternative" src="alternative.jpg" />
</video>
<iframe class="vid" id="yt" src="https://www.youtube.com/embed/qObSFfdfe7I" frameborder="0" allowfullscreen></iframe>
<div id="content">
    <p>Title</p>
    <center>
        <button>Click</button>
    </center>
</div>

<强> JS

.vid {
    width: 100vw;
    height: 400px;
    object-fit: cover;
    z-index: -1;
    position: absolute;
    background-color: black;
}
#yt {
    display: none;
}
#content {
}
p {
    color: white;
    font-size: 20pt;
    text-align: center;
    padding-top: 100px;
}
button {
    width: 100px;
    height: 30px;
}

Answer 2

使用此 '&autoplay=1' 属性，您还可以在点击按钮时直接播放 youtube 视频...

https://www.youtube.com/embed/[video-id]&autoplay=1

单击自定义按钮后打开Youtube视频

2 个答案: