We Keep Coding

how to show a div when vimeo video reaches certain second?

I am using Froogaloop.js to pause and play the vimeo video externally . Now I want to show a div after 20 second of video has been played. How to achieve this, I searched a lot and was not able to crack the code for it. This is what I have tried so far..
var iframe = document.getElementById('video');
// $f == Froogaloop
var player = $f(iframe);
// bind events
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.api("play");
});
var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
player.api("pause");
});
.button {
width: 48px;
height: 48px;
cursor: pointer;
}
.defs {
position: absolute;
top: -9999px;
left: -9999px;
}
iframe {
float: left;
width: 350px;
height: 200px;
}
.buttons {
padding: 1rem;
background: #f06d06;
float: left;
}
body {
padding: 1rem;
}
.show--div-20sec {
width: 100%;
background: red;
height: 80px;
float: left;
display: none;
}
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/froogaloop.js"></script>
<iframe src="https://player.vimeo.com/video/80312270?api=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen id="video"></iframe>
<!-----------Show this div when video has been played for 20 seconds----->
<div class="show--div-20sec">
Show me after 20 second of video play
</div>
<div class="buttons">
<button id="play-button">Play</button>
<button id="pause-button">Pause</button>
</div>
Help much appriciated.. Thanks in advance :)

Try this code
$(function() {
var iframe = $('#player1')[0];
var player = $f(iframe);
var status = $('.status');
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.api("play");
});
var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
player.api("pause");
});
setTimeout(function () {
player.addEvent('ready', function() {
player.addEvent('playProgress', onPlayProgress);
});
});
function onPlayProgress(data, id) {
var Time = data.seconds;
if (Time >= '20') {
$('.show--div-20sec').show();
}
}
});
DEMO

This is answer of your question i guess, you just need to modify the console.log part.
$(function() {
var iframe = $('#video')[0];
console.log()
var player = $f(iframe);
// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
status.text('ready');
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
player.addEvent('playProgress', onPlayProgress);
});
// Call the API when a button is pressed
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
function onPause() {}
function onFinish() {}
function onPlayProgress(data) {
if (data.seconds >= 20) {
$('.show--div-20sec').css('display', 'block')
}
}
});
.button {
width: 48px;
height: 48px;
cursor: pointer;
}
.defs {
position: absolute;
top: -9999px;
left: -9999px;
}
iframe {
float: left;
width: 350px;
height: 200px;
}
.buttons {
padding: 1rem;
background: #f06d06;
float: left;
}
body {
padding: 1rem;
}
.show--div-20sec {
width: 100%;
background: red;
height: 80px;
float: left;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe src="//player.vimeo.com/video/80312270?api=1&player_id=video" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen id="video"></iframe>
<!-----------Show this div when video has been played for 20 seconds----->
<div class="show--div-20sec">
Show me after 20 second of video play
</div>
<div class="buttons">
<button id="play-button">Play</button>
<button id="pause-button">Pause</button>
</div>

How do I remove setInterval on a function?

I've a function called fadeIn and I want to return it until a condition is met.
I tried to put an alert in the else line along with clearInterval(myVar), but it just keeps alerting.
CSS:
* {
background-color: black;
padding: 0;
margin: 0;
height: 100%;
}
#title {
background-color: white;
height: 50px;
}
audio {
display: none;
}
#audio-icon {
width: 50px;
background-color: white;
}
#focus {
background-color: black;
margin: auto;
width: 100%;
height: 700px;
border: 5px, solid, grey;
border-style: inset;
border-radius: 10px;
}
#text-box {
background-color: black;
width: 100%;
height: 200px;
margin-top: 500px;
float: left;
border: 5px, solid, grey;
border-style: inset;
border-radius: 10px;
}
#command-line {
background-color: black;
width: 100%;
height: 50px;
margin-top: 150px;
float: left;
border: 5px, solid, grey;
border-style: inset;
border-radius: 10px;
}
#element {
opacity: 0.1;
}
HTML:
<audio id="background-audio" controls autoplay="autoplay" loop>
<source src="Darkness.mp3" type="audio/mpeg">
</audio>
<div id="title">
<img id="audio-icon" src="unmute.png" onclick="mute()">
<img id="element" src="123.png">
</div>
<div id="focus">
<div id="text-box">
<div id="command-line"></div>
</div>
</div>
JavaScript:
function fadeIn() {
var myVar = setInterval(fadeIn, 500);
var element = document.getElementById('element');
if (element.style.opacity < 1) {
element.style.opacity -= '-0.1';
} else {
clearInterval(myVar);
}
}
function mute() {
var audio = document.getElementById('background-audio');
var img = document.getElementById('audio-icon');
if (audio.muted) {
audio.muted = false;
img.src = 'unmute.png';
} else {
audio.muted = true;
img.src = 'mute.png';
}
}
document.onload = fadeIn();
UPDATE:
I have put the variables outside of the function and all of the sudden my code seems to work correctly. Not sure how this is possible since I have tried this already. My code wouldn't run at all and alert would keep alerting. Anyway thanks for all the help. This was my first question so apart from a few typos and the way I listed my code I don't really know why I get downvoted so any feedback about that is welcome! Here is my current working code:
<script>
var myVar = setInterval(fadeIn, 500);
var element = document.getElementById('element');
function fadeIn() {
console.log(element.style.opacity)
if (element.style.opacity < 1) {
element.style.opacity -= '-0.1';
} else {
clearInterval(myVar);
}
}
function mute() {
var audio = document.getElementById('background-audio');
var img = document.getElementById('audio-icon');
if (audio.muted) {
audio.muted = false;
img.src = 'unmute.png';
} else {
audio.muted = true;
img.src = 'mute.png';
}
}
document.onload = fadeIn();
</script>

See the snippet .it will stop the reach with 1 .see the console.log
var myVar;
var element = document.getElementById('element');
function fadeIn() {
console.log(element.style.opacity)
if (element.style.opacity < 1) {element.style.opacity -= -0.1;
}
else {
clearInterval(myVar);
}
}
function mute(){
var audio = document.getElementById('background-audio');
var img = document.getElementById('audio-icon');
if (audio.muted) {
audio.muted = false;
img.src = 'unmute.png';
}
else {
audio.muted = true;
img.src = 'mute.png';
}
}
window.onload =function(){
myVar = setInterval(fadeIn, 500);
}
* {
background-color: black;
padding: 0;
margin: 0;
height: 100%;
}
#title {
background-color: white;
height: 50px;
}
audio {
display: none;
}
#audio-icon {
width: 50px;
background-color: white;
}
#focus {
background-color: black;
margin: auto;
width: 100%;
height: 700px;
border: 5px, solid, grey;
border-style: inset;
border-radius: 10px;
}
#text-box {
background-color: black;
width: 100%;
height: 200px;
margin-top: 500px;
float: left;
border: 5px, solid, grey;
border-style: inset;
border-radius: 10px;
}
#command-line {
background-color: black;
width: 100%;
height: 50px;
margin-top: 150px;
float: left;
border: 5px, solid, grey;
border-style: inset;
border-radius: 10px;
}
#element {
opacity: 0.1;
}
<audio id="background-audio" controls autoplay="autoplay" loop>
<source src="Darkness.mp3" type="audio/mpeg">
</audio>
<div id="title">
<img id="audio-icon" src="unmute.png" onclick="mute()">
<img id="element" src="123.png">
</div>
<div id="focus">
<div id="text-box">
<div id="command-line"></div>
</div>
</div>
var myVar ;
var element = document.getElementById('element');
function fadeIn() {
console.log(element.style.opacity)
if (element.style.opacity < 1) {
element.style.opacity -= -0.1;
}
else {
clearInterval(myVar);
}
}
window.onload= function (){
myVar = setInterval(fadeIn, 100);
}
<p id="element">hi</p>

The problem here is that setInterval is called independently of the if clauses, and that you're spamming unobserved intervals, intervals on which you don't have access anymore in the fadeIn function's block.
In this case you could have also used setTimeout instead, because it asynchronously evaluate its first argument just once, and because you don't have access to the intervals in the way you handle them.
Note: your condition for fade in is wrong, because you're decreasing the element opacity while its opacity is only bigger than 1... i just changed this 1 by 0.
var element, lastFadeInTimeout;
element = document.getElementById('element');
function fadeIn() {
// The element is not totally
// transparent yet
if (element.style.opacity > 0) {
element.style.opacity -= 0.1;
// Let's wait 500ms to fade the element
// again, only once
lastFadeInTimeout = setTimeout(fadeIn, 500);
}
}
Now, if you want to stop your fade-in action you can call clearTimeout with lastFadeInTimeout, where lastFadeInTimeout is the identifier of the last timeout created by the fade-in action.
clearTimeout(lastFadeInTimeout);

You call the fadIn func onload (that's fine) but then you create a queue to execute the function every half a second, in each iteration you create another queue to execute the functio every half a sec.... sooner or later you're going to kill the browser with this.
What you're looking for is probably more like so:
function fadeIn() {
if (opacity < 1) {
opacity += 0.1;
setTimeout(fadeIn, 500);
}
}
document.onLoad = fadeIn();
If not for purpose of learning JavaScript you should probably do things like fadeIn / fadeOut using CSS transitions rather than JavaScript.

A javascript slider array issue

Having a slider with images implementation from array, cant figure out why images dont want to be shown up from array, tryed to make a path but it didnt work.I want this code to reflect this image every time a push the button: fpoimg.com/100x100.
Im trying to fix it only with clean javascript.
Here is a sandbox
var slider = {
slides: ['100x100', '100x100', '100x100', '100x100'],
frame:0,
set:function(image){
path = path || 'http://fpoimg.com/';
document.getElementById('scr').style.backgroundImage ="url ("+path+ image+")";
},
init:function() {
this.set(this.slides[this.frame]);
},
left:function() {
this.frame--;
if(frame < 0) this.frame = this.slides.length - 1;
this.set(this.slides[this.frame]);
},
right:function() {
if(this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
window.onload = function() {
slider.init();
setInterval(function() {
slider.right();
},5000);
};
.scr {
margin:20px auto;
width: 600px;
height: 320px;
margin-top:20px;
background-color: white;
background-size:cover;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 150px;
font-size: 30px;
text-align: center;
background:none;
border:none;
}
.left {
left:25px;
}
.right {
right:25px;
}
<body>
<button class="left" onclick="slider.left();"><</button>
<div class="scr"></div>
<button class="right" onclick="slider.right();">></button>
</body>

On Line 6 of your Javascript, you have used getElementById('scr'). You have no element with an Id or scr, you needed to use getElementsByClassName('scr')
Your new code:
var slider = {
slides: ['100x100', '100x100', '100x100', '100x100'],
frame: 0,
set: function(image) {
path = path || 'http://fpoimg.com/';
document.getElementsByClassName('scr').style.backgroundImage = "url (" + path + image + ")";
},
init: function() {
this.set(this.slides[this.frame]);
},
left: function() {
this.frame--;
if (frame < 0) this.frame = this.slides.length - 1;
this.set(this.slides[this.frame]);
},
right: function() {
if (this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
window.onload = function() {
slider.init();
setInterval(function() {
slider.right();
}, 5000);
};
.scr {
margin: 20px auto;
width: 600px;
height: 320px;
margin-top: 20px;
background-color: white;
background-size: cover;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 150px;
font-size: 30px;
text-align: center;
background: none;
border: none;
}
.left {
left: 25px;
}
.right {
right: 25px;
}
<body>
<button class="left" onclick="slider.left();">
</button>
<div class="scr"></div>
<button class="right" onclick="slider.right();"></button>
</body>

It seems you've got getElementById() when you meant getElementsByClassName()

how to create video player in html 5?

My video player isn't working, it doesn't play when I click on the play button. I am testing it on chrome browser.
This is my code (I think the problem is in the JS part):
function dofirst() {
barSize = 500;
video = document.getElementById('video');
playbutton = document.getElementById('playbutton');
defaultBar = document.getElementById('defaultBar');
progressbar = document.getElementById('progressbar');
playbutton.addEventListener(click, PlayOrPause ,false);
defaultBar.addEventListener(click, clickedBar ,false);
}
function PlayOrPause() {
If( !video.paused && !video.ended){
video.pause();
playbutton.innerHTML = 'play';
window.clearInterval(updatebar);
} else {
video.play();
playbutton.innerHTML = 'pause';
updatebar = setInterval(update,500);
}
}
function update(){
if(!video.ended){
var size= parseInt(video.currentTime*barsize/video.duration);
progressbar.style.width = size +'px';
} else {
progressbar.style.width ='0px';
playbutton.innerHTML = 'play';
window.clearInterval(updatebar);
}
}
function clickedBar(e) {
If( !video.paused && !video.ended){
var mouseX = e.pageX-bar.offsetLeft;
var newtiem = mouseX*video.duration/barSize;
myMovie.currentTime = newtime;
progressbar.style.width = mouseX+'px';
}
}
window.addEventListener('load',dofirst,false);
body {
text-align: center;
}
#skin {
background: #5C6366;
width: 700px;
margin: 10px auto;
padding: 50px;
border: 2px black auto;
border-radius: 30px;
}
nav {
margin: 2px 0px;
}
#buttons {
float: left;
width: 70px;
height: 20px;
margin-left: 20px;/* 90px total 610 remaining*/
}
#defaultBar {
margin-top: 5px;
position: relative;
width: 500px;
float : left;
height: 5px;
background-color: black;
}
#progressbar {
position: absolute;
width: 0px;
height: 5px;
background-color: white;
}
<section id="skin" >
<video width=640px height=360px id="video" >
<source src="e:\dc\SampleVideo_1080x720_5mb.mp4" type="video/mp4"/>
</video>
<nav>
<div id="buttons">
<button type="button" id="playbutton">play</button>
</div>
<div id="defaultBar">
<div id="progressbar"></div>
</div>
<div style="clear:both" ></div>
</nav>
</section>
What is wrong? What do I need to fix to make it work?

There are two errors that make this not work:
JavaScript is a case sensitive language, and you are not using the right syntax for the keyword if (you wrote If in two different places):
if( !video.paused && !video.ended){
The same way that you are adding the event name between quotes in the addEventListener for the load event, you need to do the same for the click event:
playbutton.addEventListener("click", PlayOrPause ,false);
defaultBar.addEventListener("click", clickedBar ,false);
Once you fix those two things, it will work. Here is the code with the corrections:
function dofirst() {
barSize = 500;
video = document.getElementById('video');
playbutton = document.getElementById('playbutton');
defaultBar = document.getElementById('defaultBar');
progressbar = document.getElementById('progressbar');
playbutton.addEventListener("click", PlayOrPause ,false);
defaultBar.addEventListener("click", clickedBar ,false);
}
function PlayOrPause() {
if( !video.paused && !video.ended){
video.pause();
playbutton.innerHTML = 'play';
window.clearInterval(updatebar);
} else {
video.play();
playbutton.innerHTML = 'pause';
updatebar = setInterval(update,500);
}
}
function update(){
if(!video.ended){
var size= parseInt(video.currentTime*barsize/video.duration);
progressbar.style.width = size +'px';
} else {
progressbar.style.width ='0px';
playbutton.innerHTML = 'play';
window.clearInterval(updatebar);
}
}
function clickedBar(e) {
if( !video.paused && !video.ended){
var mouseX = e.pageX-bar.offsetLeft;
var newtiem = mouseX*video.duration/barSize;
myMovie.currentTime = newtime;
progressbar.style.width = mouseX+'px';
}
}
window.addEventListener('load',dofirst,false);
body {
text-align: center;
}
#skin {
background: #5C6366;
width: 700px;
margin: 10px auto;
padding: 50px;
border: 2px black auto;
border-radius: 30px;
}
nav {
margin: 2px 0px;
}
#buttons {
float: left;
width: 70px;
height: 20px;
margin-left: 20px;/* 90px total 610 remaining*/
}
#defaultBar {
margin-top: 5px;
position: relative;
width: 500px;
float : left;
height: 5px;
background-color: black;
}
#progressbar {
position: absolute;
width: 0px;
height: 5px;
background-color: white;
}
<section id="skin" >
<video width=640px height=360px id="video" >
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
</video>
<nav>
<div id="buttons">
<button type="button" id="playbutton">play</button>
</div>
<div id="defaultBar">
<div id="progressbar"></div>
</div>
<div style="clear:both" ></div>
</nav>
</section>
Note: I updated the video path to one that was actually available online to show that the video works after the changes specified above.

Iframe not displaying HTML- With JSFiddle

I am making my iframe to display an HTML string as a webpage. However I can't seem it get it right.
Iframe has to display a html string which has been returned by a JavaScript function. This html string has been extracted from the current HTML page on which the script will run.
HTML page:
<body>
<pre> This is my test page for testing . Check the html Sample below:<br><BODY></br><p>Hello World</p><br></BODY></br>HTML sample </pre>
</body>
Javascript:
(function(){
// the minimum version of jQuery we want
var v = "1.3.2";
// check for jQuery. if it exists, verify it's not too old.
if (window.jQuery === undefined || window.jQuery.fn.jquery < v) {
var done = false;
var script = document.createElement("script");
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + v + "/jquery.min.js";
script.onload = script.onreadystatechange = function(){
if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
done = true;
initMyBookmarklet();
}
};
document.getElementsByTagName("head")[0].appendChild(script);
} else {
initMyBookmarklet();
}
function initMyBookmarklet() {
(window.myBookmarklet = function() {
function getSelText() {
var test = document.body;
var text = test.textContent;
var bodyStart="<BODY";
var bodyEnd="</BODY>";
var lim1=text.indexOf(bodyStart);
var lim2=text.indexOf(bodyEnd);
var printstr=text.substring(lim1-bodyStart.length,lim2+bodyEnd.length);
return printstr;
}
if ($("#wikiframe").length == 0) {
var s = "";
s = getSelText();
if (s == "") {
var s = prompt("Forget something?");
}
if ((s != "") && (s != null)) {
var content = "<html>" + s + "</html>";
$("body").append("\
<div id='wikiframe'>\
<div id='wikiframe_veil' style=''>\
<p>Loading...</p>\
</div>\
<iframe id='wikiIDframe'></iframe>\
<style type='text/css'>\
#wikiframe_veil { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(255,255,255,.25); cursor: pointer; z-index: 900; }\
#wikiframe_veil p { color: black; font: normal normal bold 20px/20px Helvetica, sans-serif; position: absolute; top: 50%; left: 50%; width: 10em; margin: -10px auto 0 -5em; text-align: center; }\
#wikiframe iframe { display: none; position: fixed; top: 10%; left: 10%; width: 80%; height: 80%; z-index: 999; border: 10px solid rgba(0,0,0,.5); margin: -5px 0 0 -5px; }\
</style>\
</div>");
$("#wikiIDframe").contents().find('body').append(s);
$("#wikiframe_veil").fadeIn(750);
}
} else {
$("#wikiframe_veil").fadeOut(750);
$("#wikiframe iframe").slideUp(500);
setTimeout("$('#wikiframe').remove()", 750);
}
$("#wikiframe_veil").click(function(event){
$("#wikiframe_veil").fadeOut(750);
$("#wikiframe iframe").slideUp(500);
setTimeout("$('#wikiframe').remove()", 750);
});
})();
}
})();
Here's a link to JSFiddle for the same. JSFiddle
Could anybody please help me out with this.
Thanks