单击自定义按钮后，打开Youtube视频 [英] Opening Youtube video, after clicking a custom button

问题描述

我不确定这是否是问这个问题的正确地点，但是，我正在尝试实施与Google提花计划在此网站

I'm not sure if this is the correct place to ask this but, I am trying to implement something similar to what Project Jacquard by Google have done in this website https://www.google.com/atap/project-jacquard/

如您所见，有一个视频在后台自动播放(我没有使用-

As you can see, there is a video that autoplays in the background (which i have dont using -

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

这很好！

现在，还有一个名为播放电影"的按钮，单击该按钮可在前景上开始播放类似的视频，而背景自动播放的视频将停止.前景中的视频是youtube iframe，当我插入该视频时，它可以很好地嵌入页面中，但是我希望仅在播放播放电影"按钮时才能播放/显示该视频.

Now, There is also a button called "Play Film", which once clicked starts a similar video on the foreground, and the background autoplaying video stops. The video on the foreground is a youtube iframe, which when i put in, embeds well in the page, but i want it to be played/displayed only when the button "Play Film" is played.

我一直在尝试在互联网上搜索如何实现该功能，但找不到确切的内容.有人可以给我指出正确的方向吗?

I have been trying to search on the internet how to implement that, but can't find exactly what i'm looking for. Can someone please point me to the correct direction?

这是包含视频的部分，但我敢肯定它不会有太大帮助

Here's the section that has the video, but i'm sure it won't be much help

<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代码-

And the javascript code-

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

}

任何帮助将不胜感激，非常感谢！

Any help would be greatly appreciated, many thanks!

推荐答案

我首先使用 position:absolute; 设置视频和iFrame的样式，以确保它们彼此重叠.我还隐藏了iFrame，以便用户在不按按钮的情况下看不到它.

I first style the video and iFrame using position: absolute;to make sure they're on top of each other. I also hid the iFrame so the user doesn't see it without pressing the button.

然后剩下的唯一要做的就是在按下按钮时播放视频.在按钮上单击，我更改 iframe 的 src 属性，以便视频在显示时开始播放.

Then the only thing left to do is make the video play when the button is pressed. On button click I change the src attribute of the iframe so that the video starts playing when it shows.

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

要使其过渡更加平滑，可以使用 setTimeOut()方法，如下所示: https://jsfiddle.net/cqLy3hz2/

To make it transition a bit more smooth, you could use a setTimeOut() method, this is shown here: https://jsfiddle.net/cqLy3hz2/

HTML

<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>

CSS

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

JS

$("button").click(function () {
    $("#content").hide();
    $("#yt")[0].src += "?autoplay=1";
    setTimeout(function(){ $("#yt").show(); }, 200);
});

这篇关于单击自定义按钮后，打开Youtube视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！