根据YouTube视频当前时间运行倒计时器
问题描述:
我制作了一个类似YouTube的广告视频,因此它在10秒左右后便可以跳过。根据YouTube视频当前时间运行倒计时器
问题是倒计时器开始立即开始计算,即使视频还没有开始,我想做一个JavaScript条件,所以只有当视频的当前播放时间大于0时,计时器才会启动(一旦视频开始播放)。
// Countdown timer
var counter = 10;
var interval = setInterval(function() {
counter--;
if (counter == 0) {
$('#skip-counter').hide(); // Hide counter
$('#skip').fadeIn(); // Show skip ad button
clearInterval(interval); // End interval
}
else {
$('#timer').text(counter); // Printing time
}
}, 1000);
检查这里
https://codepen.io/petersherif/pen/xOZzjQ?editors=0010
codepen我搜索谷歌和计算器了很多,找到了一些解决方案,但不幸的是,我不能得到我想要从他们。
希望有人帮助我,并在此先感谢:)。
答
伟大的,非常酷的东西,我解决了我的问题,这里是我的问题的答案。
我用的YouTube API的帮助,从这个js小提琴http://jsfiddle.net/oo1g1762/1/
var myTimer;
// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement("script");
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
window.onYouTubeIframeAPIReady = function() {
player = new YT.Player("player", {
"height": "315",
"width": "560",
"videoId": "bHQqvYy5KYo",
"events": {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event){
if(event.data==1) { // playing
myTimer = setInterval(function(){
var time;
time = player.getCurrentTime();
$("#timeHolder").text(time);
}, 100);
}
else { // not playing
clearInterval(myTimer);
}
}
这是这个问题的答案YouTube API - Getting current time in a global variable
这里是我自己的代码
var myTimer;
// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement("script");
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
window.onYouTubeIframeAPIReady = function() {
player = new YT.Player("player", {
"videoId": "D3C3mAub0vA", //Here is the video ad ID
"events": {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
}
});
}
// The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// Countdown timer
var time;
function onPlayerStateChange(event){
if(event.data==1) { // playing
var counter = 10;
myTimer = setInterval(function(){
time = Math.floor(player.getCurrentTime());
if (time >= 0) {
counter--;
if (counter == 0) {
$('#skip-counter').hide(); // Hide counter
$('#skip').fadeIn(); // Show skip ad button
clearInterval(myTimer); // End interval function
}
else {
$('#timer').text(counter); // Printing time
}
}
}, 1000);
}
else { // not playing
clearInterval(myTimer);
}
}