• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

html 来源:codemode 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,以便用户在没有按下按钮的情况下看不到它。

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

看看这里: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); 
}); 

版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)