gpt4 book ai didi

javascript - 根据当前时间加载 YouTube 视频?

转载 作者:行者123 更新时间:2023-12-03 06:44:17 24 4
gpt4 key购买 nike

我有一个基于网页的幻灯片 (index.php),并且希望另一个页面 (commercial.php) 每隔 10 分钟左右中断一次,然后在 Commercial.php 页面出现后返回到 index.php已经起床 X 分钟了。

我想这样做的方法是让 javascript 说“如果当前分钟数可以被 10 整除,则加载 Commercial.php。当 Commercial.php 计时器结束时,加载 index.php”。我只是不知道如何将其放入代码中...:(

下面是我创建的测试页面,只是为了让代码正常工作,然后将其移动到真实的网页...

<body>

<div id="time"></div>
<div class="frame" style="border:1px solid red;width:100%;height:90%;"></div>

<script>
function time() {
$("#time").text(new Date().getHours() + ":" + new Date().getMinutes() + ":" + new Date().getSeconds());
}
setInterval(time, 1000);
time();

//IF STATEMENT TO LOAD VIDEO IN DIV.FRAME?

</script>

</body>

任何帮助将不胜感激。谢谢!

最佳答案

因此,我采取了将分钟存储在单独变量中的方法,然后对其使用模运算符 mins%10 来查看它是否等于 0

function time() {
var hours = new Date().getHours(),
mins = new Date().getMinutes(),
secs = new Date().getSeconds();

$("#time").text(hours + ":" + mins + ":" + secs);

if(mins%10 == 0) {
console.log('sending to commercial.php');
//location.href = 'commercial.php';
loadVideo();
}
}
//setInterval(time, 1000);
time();

function loadVideo(){
console.log('loading video');
$('<iframe>', {
src: 'https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&autoplay=1',
width: "560",
height: "315",
id: 'myFrame',
frameborder: 0,
scrolling: 'no'
}).appendTo('.frame');
}

如果出现这种情况,您将加载视频。我不确定您是否要重定向到新页面(您可以使用 location.href 执行此操作,或者您是否打算将其添加到页面中。我采用了附加 iframe 的方法到页面。

这是我的示例 https://jsfiddle.net/enigmarm/rrgbfa8x/1/

请注意,我注释掉了间隔。您需要跟踪视频是否已加载,因此在整整一分钟内,您不仅仅是重复更新同一视频。另外,在我的 fiddle 中,我将 1==1 添加到 if block 中。这样您就可以看到视频如何加载到现有页面。

至于显示此内容的时间长短,我想这取决于您从何处加载视频/广告。理想情况下,视频播放器具有您可以点击的事件状态。因此,当视频停止播放时,您可以检测到并返回到幻灯片。 YouTube's Player API has onStateChange 。否则,您必须知道每个广告需要多长时间,然后在 30 秒(或任何长度)后返回幻灯片。

<小时/>

当您希望让它淡入时,您可以使用 jQuery 的 fadeIn function 。为了在添加新元素时使其发挥作用,您必须先隐藏该元素 display: none;。在我更新的 fiddle 中:https://jsfiddle.net/enigmarm/rrgbfa8x/3/我只是设置了 iframe {display:none;},然后使用 .fadeIn(3000) 在 3 秒内淡出它。要使其淡出,您可以查看 jQuery 的 [fadeOut()`] 3

function loadVideo() {
console.log('loading video');
$('<iframe>', {
src: 'https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&autoplay=1',
width: "560",
height: "315",
id: 'myFrame',
frameborder: 0,
scrolling: 'no'
}).appendTo('.frame').fadeIn(3000);
}

关于javascript - 根据当前时间加载 YouTube 视频?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37816384/

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