gpt4 book ai didi

javascript - 在自定义屏幕中借助 Font Awesome 图标播放视频

转载 作者:行者123 更新时间:2023-11-28 02:02:17 26 4
gpt4 key购买 nike

<body>
<img src="1.jpg" height="300px" width="240px">
<a href="https://www.youtube.com/watch?v=xjDjIWPwcPU&t=2s"><i class="far fa-play-circle fa-5x"></i> </a>
</body>

body{
background-repeat: no-repeat;
background-size:100%;
height: auto;
background-image: url("black.jpg");
}

我已经在这段代码中编写了充满图像(black.jpg)的背景以及该背景图像。我有另一个图像名称 1.jpg。我想在同一窗口的自定义窗口 900*506px 中单击 Font Awesome 视频图标时播放你管视频。

最佳答案

不确定你到底想做什么,但你应该找到你需要的基础知识 JSFiddle我做得很快。

您的代码只是指向您不想播放的视频的链接,它不会在您的当前页面上播放。所以我将其更改为:

<a id="PlayButton" href="#"><i class="far fa-play-circle fa-5x"></i> </a>

所以我在您的代码中添加了一个包含视频的 iframe,并且在页面加载时隐藏了它。

<iframe id="blackpanter" style="display:none;" width="900" height="506" 
src="https://www.youtube.com/embed/xjDjIWPwcPU?rel=0" frameborder="0"
allowfullscreen></iframe>

我添加了一个 jquery 代码,当你点击按钮时显示和播放视频。

$(document).ready(function() {
$("#PlayButton").click(function(ev){
$("#blackpanter").css("display","block");
$("#blackpanter")[0].src += "&autoplay=1";
ev.preventDefault();
});
});

我建议你在继续你的元素之前学习 html、javascript 和 css 基础知识。

关于javascript - 在自定义屏幕中借助 Font Awesome 图标播放视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49240830/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com