开幕的Youtube视频，点击自定义按钮

  • Z时代
  • 2024-01-10
  • 分类：问答

后，我不知道这是否是正确的地方要问这个，但是，我想实现类似于提花项目由谷歌在这个网站做了一些https://www.google.com/atap/project-jacquard/开幕的Youtube视频，点击自定义按钮

正如你可以看到，有一个视频在后台自动播放（我有不使用 - ！

 <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，当我放入时，它嵌入在页面中，但我希望只在播放按钮“播放电影”时播放/显示。

我一直在试图在互联网上搜索如何实现，但不能找到我正在寻找什么。有人可以请我指出正确的方向吗？

这里是一个具有视频的部分，但我敢肯定它不会有太大的帮助

<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"));

}

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

回答：

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

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

看看这里：https://jsfiddle.net/h7v0e1ku/

为了使过渡更平滑一点，你可以使用一个setTimeOut()方法，这如下所示：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视频，点击自定义按钮 的全部内容， 来源链接： utcz.com/qa/260568.html

回到顶部