Develop Reference

Why is my javascript requiring 2 clicks instead of 1?

I'm using the following JS code to play an HTML5 custom video and - at the same time - activating an iframe, that will be launched just 27 seconds after the play video button is clicked.
But, I'm experiencing 2 issues:
The play button is requiring 2 clicks to start the video, instead of
just 1
The iframe is randomly activated even when the play video button
isn't clicked (between 25 and 40 seconds after the page is loaded,
randomly)
Any idea why?
<script type="text/javascript">window.onclick=function() {
setTimeout('document.getElementById("dwayne").style.display="block"',27000);
setTimeout('document.getElementById("blackrussian").style.display="inline"',27000);
var video=document.getElementById("167868028");
var playButton=document.getElementById("play-pause");
playButton.addEventListener("click",function(){if(video.paused==true){video.play();
playButton.innerHTML=" ";}else{video.pause();
playButton.innerHTML=" ";}});
}</script>
Here's the html part:
<video class="video-js" id="167868028" preload="false" width="910" height="510" poster="img/snapshot.jpg" data-setup="{}">
<source src="video/vid.mp4" type="video/mp4"></video>
<div class="controls"><button type="button" id="play-pause" class="play"><img src="img/play.png"></button></div>
<iframe id="dwayne" class="whiterussian" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" src="files/iframe.php"></iframe>
<div id="blackrussian"></div>

You've got the playButton.addEventListener nested inside the window.onclick, could be that's what's causing the two-click requirement.
And the setTimeout is inside window.click but not inside playButton.addEventListener("click"..., meaning clicking the button will not fire it, but clicking the window will, (after 27 seconds).
window.onload=function() {
var video=document.getElementById("167868028");
var playButton=document.getElementById("play-pause");
playButton.addEventListener("click", function()
{
setTimeout('document.getElementById("dwayne").style.display="block"',27000);
setTimeout('document.getElementById("blackrussian").style.display="inline"',27000);
if(video.paused==true){
video.play();
playButton.innerHTML=" ";
}else{
video.pause();
playButton.innerHTML=" ";
}
});
}
Haven't tested the code but it should work...

Based on your query, here the simplest way to make it works.
When clicking one time anywhere on the page, the video will start. Then 27 seconds later, the iframe receive a new src url, and then load.
window.onclick=function() {
document.getElementById("167868028").play()
setTimeout(loadFrame, 27000)
}
function loadFrame(){
document.getElementById("dwayne").src = "http://arunranga.com/examples/access-control/"
}
<video id="167868028" width="91" height="51" poster="img/snapshot.jpg">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<iframe id="dwayne" frameborder="3" src="" scrolling="yes"></iframe>

Add an audio player, Enable and Disable tab

here in this blog I found an interesting effect that I put into practice programming using the footer attribute. The effect is to slide the footer as if it were like a tab for which to program I worked.
Now the problem is if I add an audio player above the tab, when I want to start the audio playback, the tab slides to click on my player for example click on PLAY or stop, what I want is that only this Activated the FOOTER tab to click on it to slide, instead the audio player that does not perform any action in sliding as a bullet and only play when I click on it.
Here the codes:
HTML
<span class="fTab">
<!- - AUDIO- - >
<section id="repro">
<audio controls="controls" autoplay>
<source src="music.mp3" type="audio/mpeg" />
</audio>
</section>
***CONTENT***
</span>
<footer>
<section class="credit">
<div id="slideout_inner">
**CONTENT**
</div>
</section>
</footer>
JAVASCRIPT
jQuery(function($){
$('.fTab').on('click', function(){
$(this).toggleClass('active');
});
})
The css is long because it is not very important. The important thing is the javascript since it is the one that will execute the effect of sliding the FOOTER.
I hope you understand what I say, I hope your help from everyone. Thank you

You can use stopPropagation. If #repro element is clicked then the $(this).toggleClass('active'); won't be fired.
The event.stopPropagation() method stops the bubbling of an event to
parent elements, preventing any parent event handlers from being
executed.
$("#repro").click(function(event){
event.stopPropagation();
});

how to play sound on a href click and mouseover

This is my header:
I want to add sound affect twice:
on mouseover on a href from (innerlinks)
on click on href from (innerlinks)
I want a different sound onclick and onmouseover.
what is the best way?
thanks!
<div id="HoverHeader">
<div id="SiteHeader">
<div id="MainNav">
<div id="btnNav"><img src="../../../000Frames/site/images/menu-bt.png" alt="menu"/></div>
<uc1:mainNav ID="mainNav1" runat="server" />
<div id="InnerLinks">
תיק עבודות
לקוחותינו
אודותנו
צור קשר
</div>
</div>
</div>
</div>

You can add couple audio tags on page and play them as described in this article - Play Sound on :hover | CSS-Tricks.
<audio>
<source src="audio/beep.mp3"></source>
<source src="audio/beep.ogg"></source>
Your browser isn't invited for super fun audio time.
</audio>
<script>
var audio = $("#mySoundClip")[0];
$("nav a").mouseenter(function() {
audio.play();
});
</script>

That needs JavaScript and an audio tag. This is from http://css-tricks.com/play-sound-on-hover/
For hover sound:
<audio id="hover">
<source src="audio/hover.mp3"></source>
<source src="audio/hover.ogg"></source>
Your browser isn't invited for super fun audio time.
</audio>
var hover = $("#hover")[0];
$(".InnerLinks a").mouseenter(function() {
hover.play();
});
For click sound:
<audio id="click">
<source src="audio/click.mp3"></source>
<source src="audio/click.ogg"></source>
Your browser isn't invited for super fun audio time.
</audio>
var click = $("#click")[0];
$(".InnerLinks a").click(function() {
click.play();
});
Demos at CSS Tricks

Play Video button

I want to trigger play function of the video. . Can you suggest the javasript function to play this video ?
jsfiddle code is given here. To play the video I need to rightclick the video and they click play function of flashplayer.
I have the below video code in html:
<div class="content flowplayer is-splash is-closeable" id="vid1">
<video src="http://www.w3schools.com/html/movie.webm" tabindex="0">
<source type="video/mp4" src="http://www.w3schools.com/html/movie.mp4"></source>
<source type="video/webm" src="http://www.w3schools.com/html/movie.webm"></source>
</video>
</div>

I have update your code. It's working now.
You have to get element's id of tag video and then just say .play()
More example here.

Get a reference to the video element (e.g. by giving it an id then using document.getElementById), then call the play() method on it.

Add event on html5 video play button

So I only want to access the play button of the video controls, no action when pressing the track bar or volume. I want something like this but with html5 video http://flash.flowplayer.org/demos/installation/multiple-players.html
jQuery(document).ready(function() {
$('.vids').click(function(){
$('.vids').each(function () {
this.pause();
});
});
});
<video controls="controls" class="vids" id="1">
<source src ....>
</video>
<video controls="controls" class="vids" id="2">
<source src ....>
</video>
....
So now all videos stop except the one I clicked but when I press the trackbar or volume, it also stops. Any solutions without making my own controls or making use of another videoplayer? I found different solutions but not as I want :S

I think you have to target the current item which you are clicking so that the clicked target get the command to process to do this try this one and see if this works for you:
$('.box').click(function(e){
$(e.target).pause();
});