JavaScript audio will not play when tab is not in focus - javascript

I have a webpage that uses JQuery Countdown and I have an audio clip that plays when the coundown reaches zero.
Here's the relevant code:
<script>
$(function (){
$('#Timer1Timer').countdown({until: +(28800), onExpiry: play_single_sound});
$('#Timer2Timer').countdown({until: +(172800), onExpiry: play_single_sound});
$('#Timer3Timer').countdown({until: +(10), onExpiry: play_single_sound});
});
function play_single_sound() {
document.getElementById('audiotag1').play();
}
</script>
<audio id="audiotag1" src="audio/alert.wav" preload="auto"></audio>
The audio plays just fine when I have the page open in it's own window and I'm using a separate window to view another page. However, if I have a different tab open and active in the same window, the audio will not play when the countdown completes.
Any sort of assistance or explanation would be wonderful!

I don't think you need a plugin to replace javascript's native setTimeout. Try setTimeout(play_single_sound, 5000)

Related

Create pause link for clappr player

I am trying to stop the clappr player from playing via a link. I have this code in the html of the page where my player is...
dev tools says that player.stop is not a function but I know it is a function in the clappr.js file which is in included and working.
any suggestion?
<script>
function timeOutVideo() {
this.player.stop();
}
</script>
<button onclick="timeOutVideo()">Stop</button>
Is your video embedded from "YouTube"?
this function will stop it
$(function(){
$('yourbutton').click(function(){
$('iframeYoutube').attr('src', $('iframeYoutub').attr('src'));
});});

jwplayer: using seek(), onTime() and stop() to play part of the video

I am using latest JW Player cloud hosted version.
I need to seek the video to start from certain position and stop at certain position using seek(), onTime() and stop().
jwplayer().onReady(function() {
jwplayer().seek(300).onTime(function(event) {
if(event.position>330) {
jwplayer().stop();
}
});
});
The video starts and stops with the above command, but if the user clicks on play button again, it starts from beginning instead of the time specified in seek().
I have advertisement associated with this video.
Any help!
Thanks
you could try using onBeforePlay() method, its fired just before playing, as:
jwplayer('player').setup({
......
});
jwplayer().onBeforePlay(function(){
jwplayer().seek(300);
});

Stop YTplayer video when link is clicked ... or just pause it?

Site plays a full screen video with sound. The site was designed to play the video without sound. When a link is clicked the other portions of the site appear on top of the video.
Unfortunately the client has insisted on having sound, so when something is clicked you still hear the music until the video ends. I know it is possible to have the video stop or even have it muted when a link is clicked but I cannot seem to understand where exactly to implement this. Your help is appreciated. I'm not a jquery person so I'm rather dim on this. Site uses the YTPlayer ( http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-ytplayer/ )
The site: http://www.bradfordweb.com/clients/concannon2/
The code in the page that is playing the video is:
<a id="P2" class="player" data-property="{videoURL:'http://youtu.be/OgAr2jQr3rg',containment:'#home',autoPlay:true, mute:false, loop:false, opacity:.6}"></a>
The link is:
<div class="link-home"><div class="cl-effect-8"><span>ABOUT US</span> </div></div>
I tried:
onclick="stop()"
and
stopYTP
I found the function in the jquery.mb.YTPlayer.js file:
stopYTP: function () {
var YTPlayer = this.get(0);
var controls = jQuery("#controlBar_" + YTPlayer.id);
var playBtn = controls.find(".mb_YTVPPlaypause");
playBtn.html(jQuery.mbYTPlayer.controls.play);
YTPlayer.player.stopVideo();
},
Help?
I've had this issue as well and found it in the onYouTubePlayerReady function.
Look for it in that file and do the following changes:
function onYouTubePlayerReady(playerId) {
var player=$("#"+playerId);
player.mb_setMovie();
// Remove or comment out the lines below.
// $(document).on("mousedown",function(e){
// if(e.target.tagName.toLowerCase() == "a")
// player.pauseYTP();
// });
}
That line just simply binds the mousedown event on an a tag and consequently pauses the player.
Hope that helps.

Change firefox playback bar into a onclick button for audio

SAME ISSUE! As we all know firefox and audio is a problem because of patents and such. I found this little code on the internet to play my sounfile.
I would like to play multiple files instead of just one while having the display bar not show up in the browser
you can change the player width to 0 but than the user can not click the play button :P
Is there a way of possibly having the sound play on click of a link or button.
Please note. Do not give me codes that have no compatibility outside chrome and ie.
HTML
<audio id="audioplayer" preload controls loop style="width:400px;">
<source src="sounds/sound1.mp3">
<source src="sounds/sound1.caf">
</audio>
Javascript
<script type="text/javascript">
var audioTag = document.createElement('audio');
if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")))) {
AudioPlayer.embed("audioplayer", {soundFile: "sounds/sound1.mp3"});
}
</script>
RECAP:
Have the sound play on a button or link click.
Have multiple sounds available to play (not just one)
Compatibility with firefox
non visible soundbar.
Still learning myself. But this is a button, with a script to play an audio file. (part of my own solution) Plays only 1 sound at a time, but doesn't show anything about it.
You could also make a funtion like this, without setting the src, using the pause() command.
currenttime is used to change the part where the audio file was.
Sound play button<br>
<script>
sound = new Audio();
function playSnd(soundSrc) {
sound.src = soundSrc;
sound.play();
}
</script>

How to lock controls on <video> in HTML5 till a given event happens?

I want to pause the video being played at a particular instant till a question that pops up has been answered. The user should not be able to go ahead and forward the video till a particular question that has just poppped up has been answered.
So I can pause the video using JS at that particular instant. How can I ensure the video's controls are unlocked or the video plays again only after answering the question that pops up?
look at this demo http://jsfiddle.net/dgLds/58/
var video = document.getElementById("myvideo");
function toggleControls() {
document.getElementById('myvideo').pause();
if (video.hasAttribute("controls")) {
video.removeAttribute("controls")
} else {
video.setAttribute("controls","controls")
}
}
<video id="myvideo">
<source src="http://www.w3schools.com/html5/movie.mp4" />
</video>
<p onclick="toggleControls();">Toggle</p>
instead of on click you can call the function when ever you want
Here is a opera article on everything you wish to know about html5 video http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
Specifically look at How to keep things synchronized section
EDIT: I you want to disable right-click options. Just go ahead and disable right click on that tag/id
Here is a jquery code
$('video').bind('contextmenu', function()
{
alert('no right click.');
return false;
});
I ran into the need to be able to disable the context menu myself today because we have our own custom controls. You can do this fairly easily:
video.addEventListener('contextmenu', function(e) {
e.preventDefault();
return false;
});
He is an example built upon Web Developer's demo: http://jsfiddle.net/dgLds/308/
There is a pause() method available for the video element:
document.getElementById('myVideo').pause();
Similarly, there is play().

Categories