I'm looking for a simple way to temporarily disable a mouseover event, for literally 1000 miliseconds. All my attempts to do so, have so-far failed. I am trying to stop my images from flickering when the mouse enters several times as it hovers over the edge of the div. Here is my code:
var ranNum, result_10, resultFloor, piccy, audio;
function myFunction() {
ranNum = Math.random();
result_10 = (ranNum * 5) + 1;
resultFloor = Math.floor(result_10);
piccy = "<img src=\"random_images/" + resultFloor + ".gif\" />";
document.getElementById("demo").innerHTML = piccy;
audio = document.getElementById("audio");
audio.play();
}
<div id="container">
<div id="demo" onmouseenter="myFunction()">This</div>
<audio id="audio" src="pop.wav" ></audio>
</div>
This will stop the flicker:
var ranNum, result_10, resultFloor, piccy, audio;
var isPlaying = false;
var audio = document.getElementById("audio");
function myFunction() {
if (!isPlaying) {
isPlaying = true;
ranNum = Math.random();
result_10 = (ranNum * 5) + 1;
resultFloor = Math.floor(result_10);
piccy = "<img src=\"http://d2.alternativeto.net/dist/icons/cloudapp_2094.png?width=64&height=64&mode=crop&upscale=false\" />";
document.getElementById("demo").innerHTML = piccy;
// check every 1/2 second to see if the audio has ended
var t = setInterval(function() {
console.log(audio.ended);
if (audio.ended) {
isPlaying = false;
clearInterval(t);
}
}, 500);
audio.play();
}
}
<div id="container">
<div id="demo" onmouseenter="myFunction()">This</div>
<audio id="audio" src="http://freewavesamples.com/files/Casio-MT-45-Pops.wav" ></audio>
</div>
var myFunctionDisabled = null;
function disableMyFunction() {
clearTimeout(myFunctionDisabled);
myFunctionDisabled = setTimeout(function() { myFunctionDisabled = false; }, 1000);
}
function myFunction() {
if (myFunctionDisabled) return;
...
}
Here's a quick and dirty approach. Simply uses a variable referencing a function, and changes the reference to point to a function that does nothing, then back to the original function.
I agree with Kosch's suggestion of using the underscore/lodash debounce function if you're already using those libraries or if you see them helping you in more than just this one case.
var ranNum, result_10, resultFloor, piccy, audio;
function myFunction() {
disableMouseOverHandler();
ranNum = Math.random();
result_10 = (ranNum * 5) + 1;
resultFloor = Math.floor(result_10);
piccy = "<img src=\"random_images/" + resultFloor + ".gif\" />";
document.getElementById("demo").innerHTML = piccy;
audio = document.getElementById("audio");
audio.play();
}
function doNothing() {
}
var mouseOverHandler = myFunction;
function disableMouseOverHandler() {
mouseOverHandler = doNothing;
setTimeout(function(){ mouseOverHandler = myFunction; }, 3000);
//I used 3000ms (3 seconds) to make it more pronounced.
}
<div id="container">
<div id="demo" onmouseenter="mouseOverHandler()">This</div>
<audio id="audio" src="pop.wav" ></audio>
</div>
Related
I want to play a video in a res of 720p (1280x720) with an autoplay and a loop whenever the video ends replace by another video in array.
the first video works fine, but it didn't autoplay, and after it end. it does not continue to play another video.
here's my code :
<div class="content-left">
<video controls id="myVideo" width="1280" height="720" autoplay></video>
<script>
var videoSource = new Array();
videoSource[0]='videos/bluevideo.mp4';
videoSource[1]='videos/redvideo.mp4';
videoSource[2]='videos/yellowvideo.mp4';
var videoCount = videoSource.length;
document.getElementById("myVideo").setAttribute("src",videoSource[0]);
function videoPlay(videoNum)
{
document.getElementById("myVideo").setAttribute("src",videoSource[videoNum]);
document.getElementById("myVideo").load();
document.getElementById("myVideo").play();
}
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler() {
i++;
if(i == (videoCount-1)){
i = 0;
videoPlay(i);
}
else{
videoPlay(i);
}
}
</script>
</div>
where did I do wrong? can anyone help me?thankyou very much.
You have a variable i which you increment in myHandler. However, it isn't declared anywhere. You should declare it outside the code of the event handler, and set the value to the first index:
var videoSource = new Array();
videoSource[0] = 'videos/bluevideo.mp4';
videoSource[1] = 'videos/redvideo.mp4';
videoSource[2] = 'videos/yellowvideo.mp4';
var videoCount = videoSource.length;
var i = 0;
document.getElementById("myVideo").setAttribute("src", videoSource[0]);
function videoPlay(videoNum) {
document.getElementById("myVideo").setAttribute("src", videoSource[videoNum]);
document.getElementById("myVideo").load();
document.getElementById("myVideo").play();
}
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
function myHandler() {
i++;
if (i == videoCount) {
i = 0;
videoPlay(i);
} else {
videoPlay(i);
}
}
I have a some videos, that need to be play continuously. But there is a condition, first video should be play upto 24 hours.it means, loop the first video for 24 hours. after that next video. Now the videos are playing continuously. But I Don't know how to set the time for playing videos. Please help me to solve this problem. Thank you.
Here is My code.
var videoSources = ["video/kid.mp4", "video/hands.mp4", "video/video5.mp4", "video/action.mp4"];
var currentIndex = 0;
// listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByClassName('episodeVideo')[0];
myVideo.src = videoSources[currentIndex];
myVideo.load();
}
// add a listener function to the ended event
function myAddListener() {
var myVideo = document.getElementsByClassName('episodeVideo')[0];
currentIndex = (currentIndex + 1) % videoSources.length;
myVideo.src = videoSources[currentIndex];
myVideo.addEventListener('ended', myNewSrc, false);
}
<div class="video-wrapper-main">
<video onended="myAddListener()" class="episodeVideo" preload="auto" autoplay controls>
<source src="" type="video/mp4">
</video>
</div>
var videoSources = ["video/kid.mp4", "video/hands.mp4", "video/video5.mp4", "video/action.mp4"];
var startTime = Date.now();
var currentIndex = 0;
// listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByClassName('episodeVideo')[0];
var newTime = Date.now();
var msIn24Hours = 1000 * 60 * 60 * 24;
var isAfter24Hours = newTime - startTime >= msIn24Hours;
if(isAfter24Hours) {
myVideo.src = videoSources[currentIndex];
startTime = newTime;
}
myVideo.load();
}
// add a listener function to the ended event
function myAddListener() {
var myVideo = document.getElementsByClassName('episodeVideo')[0];
currentIndex = (currentIndex + 1) % videoSources.length;
myVideo.src = videoSources[currentIndex];
myVideo.addEventListener('ended', myNewSrc, false);
}
You could then store the start into localStorage and use that value.
JavaScript
var videoPlayer = document.getElementById('videoPlayer');
var volumeSlider = document.getElementById('volumeSlider');
mutePlayer.addEventListener('click', function() {
var mutePlayer = document.getElementById('mutePlayer');
var playMute = document.getElementById('playMute');
if(videoPlayer.muted) {
videoPlayer.muted = false;
playMute.src = "img/mute.png";
volumeSlider.value = 100; /** THIS IS THE PROBLEM RIGHT NOW I HAVE JUST SET IT TO 100 */
} else {
videoPlayer.muted = true;
playMute.src = "img/unmute.png";
volumeSlider.value = 0;
}
});
volumeSlider.addEventListener('change', function() {
videoPlayer.volume = volumeSlider.value / 100;
});
This code has to be the current value of the #volumeSlider
I have tried this but i cant access the variable volumeSlider since its scoped?
volumeSlider.addEventListener('click', function() {
var volumeSlider = volumeSlider.value;
return;
});
The HTML5
<video id='videoPlayer' class="videoPlayer" width="640px" height="360px">
<source id="Video" src="vid/bbb.mp4" type="video/mp4" height="360px" width="640px">
</video>
<button id='mutePlayer'class="center" >
<img id='playMute' src='img/mute.png'>
</button>
<input id='volumeSlider'class="center" type="range" min='0' value='100' step="1"></input>
Can someone help me crack this?
There's a couple of reasons why your code wont execute correctly. If you want to change a global variable in a scope, you don't want the var in front of the variable name.
What I've changed in the code is that the default value gets set to 100, but when I click on the slider sets inputs value to the value that's clicked on. The code will look like this:
var videoPlayer = document.getElementById('videoPlayer'),
mutePlayer = document.getElementById('mutePlayer'),
playMute = document.getElementById('playMute'),
volumeSlider = document.getElementById('volumeSlider'),
durationTimeText = document.getElementById('durationTimeText').innerHTML = "01:00",
videoPlayerVolume = 100;
volumeSlider.value = 100;
mutePlayer.addEventListener('click', function() {
if (videoPlayer.muted) {
volumeSlider.value = cachedVolume;
videoPlayer.muted = false;
playMute.src = "img/mute.png";
} else {
cachedVolume = volumeSlider.value;
videoPlayer.muted = true;
playMute.src = "img/unmute.png";
volumeSlider.value = 0;
}
});
volumeSlider.addEventListener('change', function() {
videoPlayerVolume = volumeSlider.setAttribute('value', this.value);
if (volumeSlider.value > 0) {
playMute.src = "img/mute.png";
}
});
I also added a small feature for you that sets the button image to the mute image, if the value of the input is over 0 which means that it's not muted.
If you're questioning the this keyword, it takes the element that gets clicked on and replaces it with itself. You can read more about the this keyword here.
I hope it helped.
The Audio player loads and initializes, but the controls disappear once I pass the third song (see >= 3 test). I'm not certain if that's an incredible coincidence but it seems likely I have broken something. Why do the audio controls vanish?
Also, the volume controls do not initialize. Does anyone know why?
<script>
window.onload = function() {
var number = Math.floor((Math.random() * 10) + 1);
if(number >= 3) {
document.getElementById("audio").innerHTML = "<audio id='vid' src='remix.mp3' type='audio/mpeg' autoplay='true' loop='true'></audio>";
} else {
document.getElementById("audio").innerHTML = "<audio id='vid' src='lose.mp3' type='audio/mpeg' autoplay='true' loop='true'></audio>";
}
};
(function(){
var vid = document.getElementById("vid");
vid.volume = 0.2;
});
</script>
<script>
jQuery(function($) {
$("#vid").prop('volume', 0.2);
window.setVolume = function(bgAudio,vol) {
sounds[bgAudio].volume = 0.33;
}
});
</script>
<div id="audio">
</div>
There is no need to replace the whole audio tag. Just change the src attribute:
<audio id='vid' src='remix.mp3' type='audio/mpeg' autoplay='true' loop='true'></audio>
...
$('#vid').attr('src', 'remix.mp3');
EDIT
Your code is a mess, I've tried to refactor it a bit:
(function() {
var number = Math.floor((Math.random() * 10) + 1);
var player = $('#vid');
player.attr('src', number >= 3 ? 'remix.mp3' : 'lose.mp3');
player.prop('volume', '0.2');
player[0].play(); //run the audio track
//not sure about this function
window.setVolume = function(bgAudio, vol) {
sounds[bgAudio].volume = vol;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<audio id='vid' src='' type='audio/mpeg' loop='true'></audio>
And check mp3 file names and location.
i want to play 2 sounds in ios and since it could not be done, i defined 2 audio objects.
i start playing the first sound and when want to play the second, i pause the first and wait till the second end, then i resume playing the first from the point it reached.
you can check the following code, if i remove the alert("test"); the first audio start playing from zero and so current time don't work!
kindly help.
Thanks,
var PlayedTime = 0; ; //in seconds
var AudioObj;
var audioType = '.mp3';
var isResume = false;
$(document).ready(function () {
if (!!AudioSound.canPlayType('audio/ogg') === true) {
audioType = '.ogg' //For firefox and others who do not support .mp3
}
AudioObj = document.getElementById('AudioSound');
document.getElementById('AudioSound').addEventListener('ended', function () {
resume();
});
});
function play1() {
AudioObj.src = "Images/Sound1" + audioType;
AudioObj.load();
}
function play2() {
PlayedTime = AudioObj.currentTime;
AudioObj.pause();
AudioObj.src = "Images/Sound2" + audioType;
AudioObj.load();
AudioObj.play();
}
function resume() {
isResume = true;
AudioObj.pause();
AudioObj.src = "Images/Sound1" + audioType;
AudioObj.load();
}
function JumpAudio() {
AudioObj.currentTime = 36;
}
function DataLoadedtoPlay() {
AudioObj.play();
if (isResume) {
isResume = false;
try {
alert("test");
AudioObj.currentTime = PlayedTime;
}
catch (e) {
alert("catch");
}
}
}
<div id="containerAud">
<audio id="AudioSound" onloadeddata="DataLoadedtoPlay()"></audio>
</div>
<input type = "button" onclick="play1()" value="click1"/>
<input type = "button" onclick="play2()" value="click2" />
<input type = "button" onclick="JumpAudio()" value="JumpAudio" />
</div>