I'm creating a simple game of Simon, and I want the easiest way to code where if one of the four buttons is clicked, it changes the image for a second or so (on mode), plays a sound, then goes back to its original color. Right now I've searched, but everything I've seen has to do with divs, or other types of questions.
As of now the button changes to the on button image, plays the sound, but when I try any function to hide or fadeOut or anything of that sort, it goes to a strange greyish color, but does not disappear. I've tried to use attr() to set the image back to what it originally was with a delay in between, but that doesn't work, either. The code is long, but I'll post what's relevant...
<audio src="sounds/1.mp3" id ="snd1"></audio>
<audio src="sounds/2.mp3" id ="snd2"></audio>
<audio src="sounds/3.mp3" id ="snd3"></audio>
<audio src="sounds/4.mp3" id ="snd4"></audio>
<div id="juego">
<div id="simon">
<div id="c1"><img id ="c1i" src="imgs/d1.png"></div>
<div id="c2"><img id ="c2i" src="imgs/d2.png"></div>
<div id="c3"><img id ="c3i" src="imgs/d3.png"></div>
<div id="c4"><img id ="c4i" src="imgs/d4.png"></div>
</div>
and from my js file...
$("#c1").on("click", function() {
$("#c1i").attr("src", "imgs/1.png").hide("slow");
$("#snd1")[0].play();
});
edit: I will also add that clicking the button as of now only lets me click it once to perform the function. After one click, it just greys out. No color change, no sound played. Mystifying to me...
try this :
$("#c1").on("click", function() {
// change the image , and make sure this image path exists ...
$("#c1i").attr("src", "imgs/1.png");
// make it disappear and play the sound after 1 second
setTimeout(function(){
$("#c1i").hide();
$("#snd1")[0].play();
},1000);
});
Related
I want to know how to add selected YouTube videos to a temporary playlist / playing queue?
I have an option where user have to select what all videos to be included in the playing queue.
Click on the ADD icon (black background box) and that selected video will be displayed in the purple background and it also has to be included in the playlist/Queue.
I am able to add the videos in the purple box but unable to add them in the queue.
I tried using this code
player.cuePlaylist({
list: ["83uA6kS_6LE", "RVYU9Be2RtA", "DkQRcjKTqiU", "5NUZtQRgLSQ"] //array of videos ID
});
After that when currently playing video ends I tried to play next video using
function onPlayerStateChange(event) {
if(event.data==0){ //when video ends event.data becomes 0
player.nextVideo();
}
But it neither do anything nor shows any error in the console.
I even tried replacing player.nextVideo(); with player.playVideo(); then instead of starting next video it re-plays the current one.
I tried looking for it in the YouTube documentation but couldn't find anything
https://developers.google.com/youtube/js_api_reference#Queueing_Functions
EDIT 1
TRIED with
cueVideoById(); loadVideoById();
But not working.
I would really appreciate if you guys can provide me an answer or a way to reach the correct audience for this question.
I think the issue is that you have a typo in your call to cuePlaylist. The argument is "playlist" and not "list". Try this:
player.cuePlaylist({
playlist: ["83uA6kS_6LE", "RVYU9Be2RtA", "DkQRcjKTqiU", "5NUZtQRgLSQ"]
});
I'm trying to make a kisok application to show some slides and play 2 videos from a menu using reveal.js. it is all working well and looks great apart from the video playback.
Im using a <video> tag inside the <section> as the data-background-video="something.mp4" didn't seem to restart on slide change either.
If i'm navigating out of the playing video slide and then returning to it, the video resumes where it left off and doesn't restart at the beginning as I require like even though autoplay is set to true.
I have tried to write something that does this with javascript using the api on Reveal.addEventListener after naming the <section> with data-state="something" and it works.. well kind of.. it works successfully for the first video only, well, then only for a while then it seems to break all video playback. the second video plays once then will not restart and i then can not control it via the console either.
here is the relevant html:
<!--*********************************************************Video 1 Page-->
<section id="rene_vid_page" data-state="video1_show" data-transition="fade-in fade-out" data-background="img/Backdrop.svg">
<h1 class="page_title">My page title</h1>
<video id="rene_vidplayer" data-autoplay data-src="Videos/full_edit_portrait.mp4" ></video>
<!--*********************************************************End Of Video 1 Page-->
<!--*********************************************************Video 2 Page-->
<section id="conc_vid_page" data-state="video2_show" data-transition="fade-in fade-out" data-background-color="#c8c8c8">
<h1 class="page_title">My page title</h1>
<video id="conc_vidplayer" data-autoplay data-src="Videos/2 Conclusions.mp4" ></video>
</section>
<!--*********************************************************End Of Video 2 Page-->
Here is the javascript i have cobbled together,
this also advances to the next slide when the video is finished and that bit works..
<script>
var video = document.getElementById("rene_vidplayer");
video.onended = function (e) {
console.log("video_ended slide advance");
Reveal.next();
};
Reveal.addEventListener('video1_show', function (e) {
// Called when "video1_show" slide is made visible
console.log('"rene video show has been called"');
video.currentTime = 0;
console.log('"videotime set to 0"');
video.play();
console.log('"video set to play"');
});
var video2 = document.getElementById("conc_vidplayer");
video2.onended = function (e) {
console.log("video2_ended slide advance");
Reveal.next();
};
Reveal.addEventListener('video2_show', function (e) {
// Called when "video2_show" slide is made visible
console.log('"video2_show has been called"');
video2.currentTime = 0;
console.log('"videotime set to 0"');
video2.play();
console.log('"video2 set to play"')
});
</script>
I can see in the console that the logs i have put in are working in the right places but the video stops behaving :( the second video will run from video2.play() in the console but only if the first one hasn't finished or the second one been played already.
You can tell that my js coding is not great at the moment and there are probably so many errors, and ultimately a much better way of doing this.
Any help or advice is greatly appreciated as it is desperately needed for a show next week!!
Ok, so i got this to work by adding a video.load() and video2.load() into the respective Reveal.addEventListener sections. Not sure if there are any problems associated with doing it this way or whether there is a better way?
However this is now working fine! :)
I have a page with multiple HTML5 videos on it. For each video, there is a "poster" image that sits on top of the video. When someone clicks the poster image, the image disappears via CSS, and the video below it plays.
My problem is that I can only get the FIRST video on the page to play when someone clicks it. I'd like the user to be able to click any of the videos on the page to play them. My guess is that I somehow need to incorporate the "each()" function into the jQuery code.
Here is my current jQuery code:
$('#videocover').click(function() {
var video = $('#wp_mep_1').get(0);
video.play();
$(this).css('visibility', 'hidden');
return false;
});
Below is a JSFiddle with multiple videos on the page, but only the first one working when you click it. Feel free to play around:
https://jsfiddle.net/rtkarpeles/ammebd3k/3/
Thanks in advance for any and all help you can provide!
You cannot have multiple elements with same ID. Change them to class.
Change the video-container from ID to class and videocover as well.
<div class="video-container">
<video>...</video>
<div class="videocover"></div>
</div>
With the above structure the below script should work fine.
$('.videocover').click(function () {
var video = $(this).closest('.video-container').find('video')[0];
video.play();
$(this).css('visibility', 'hidden');
return false;
});
.closest() will fetch the first match when traversing through ancestors in DOM
Here is a demo https://jsfiddle.net/dhirajbodicherla/ammebd3k/5/
Change your IDs to classes.
https://jsfiddle.net/ammebd3k/6/
.videocover and .wmp_mep_1
IDs must be unique on a page, or else you run into exactly your issue.
Im pretty new to js/jquery and need some help from someone more knowledgeable!
I have had a good look on this site and on the web but cannot find the answer myself. I've played around myself but with my limited knowledge I just cannot figure out what to do next.
What I've got
I have an img that when clicked is replaced by an iframe (youtube video), much like a placeholder/poster, and that works perfectly with the below code, which I originally found here: How to add a splash screen/placeholder image for a YouTube video:
<div class="playbutton"></div>
<img src="image.jpg" data-video="http://www.youtube.com/videolink">
<script>
$('img').click(function(){
var video = '<div class="video-container"><iframe src="'+ $(this).attr('data-video') +'"></iframe></div>';
$(this).replaceWith(video);
});
</script>
As I said - it works perfectly when the image is clicked it is replaced by the video.
The Problem
I have now added a play button (currently a div but I can use img instead) floating above the img. If I click on the play button nothing happens (obviously as it is nothing to do with the script).
I want this play button to "trigger" the replacing of the img with the iframe but I do not have a clue what to add to my script to make this happen.
What I'm looking for
I'm looking for the play button to be the "trigger" when clicked or ideally to have both the play button and the img as "triggers" so it works if a user clicks on the image too and not just the play button.
While I've got you...
Would I also be able to replace the iframe with the img again if a close button is added to the mix and clicked on?
Any help will be greatly appreciated!
Dale
This will do All you want including close button:
Here is the working fiddle:
http://jsfiddle.net/ANRHT/6/
js:
$('.playbutton,img').click(function(){
var video = '<div class="video-container"><iframe src="'+$('img').attr('data-video') +'"></iframe></div>';
$('.video').hide();
$('.tube').html(video);
$('.close').show();
});
$('.close').click(function(){
$('.video').show();
$('.tube').empty();
$('.close').hide();
});
HTML:
<div class="video">
<div class="playbutton">Play</div>
<img src="http://cdn0.sbnation.com/uploads/chorus_image/image/5372321/battlefield3-screen-12.0_cinema_640.0.jpeg" data-video="http://www.youtube-nocookie.com/embed/U8HVQXkeU8U?&autoplay=1&rel=0&fs=0&showinfo=0&autohide=3&modestbranding=1">
</div>
<div class="tube"></div>
<div class="close">Close X</div>
$("#play-button").on('click', function () {
//this fires the same click event from your code.
$("img").trigger('click');
});
$("#close-button").on('click', function () {
$("iframe").replaceWith("<img src='image.jpg'>");
});
I've got a page with links to MP3s, when the link is clicked I use javascript to show a small Flash player (NiftyPlayer) under the link. When a different link is clicked, the old player is hidden and the new player is revealed.
The player auto-starts when the element is shown, and auto-stops when hidden - in Firefox.
In IE it will only auto-start and NOT auto-stop. This is what I would like to solve.
This is an example HTML with link and player
Misunderstood What You Said
<div id="player662431" class="playerhide"><embed src="http://www.example.com/shop/flash/player.swf?file=/mp3/Beat The Radar - Misunderstood What You Said.mp3&as=1" quality="high" bgcolor="#000000" width="161" height="13" name="niftyPlayer662431" align="" type="application/x-shockwave-flash" swLiveConnect="true" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
Here is the javascript (I've got jQuery installed to let me hide all the open players on this page apart from the new one)
function toggle_visibility(id) {
$('.playerhide').hide();
var e = document.getElementById(id);
e.style.display = 'block';
}
I think what I need to do is start the player manually with javascript (rather than using the autostart as=1 function in the URL string)
There is some javascript that comes with NiftyPlayer to allow this EG
niftyplayer('niftyPlayer1').play()
there is also a stop method.
I need some help with javascript - how do I add this call to play into my toggle_visibility function (it has the same unique ID number added to the name of the player as the ID of the div that's being shown, but I don't know how to pull this ID number out of one thing and put it in another)
I also would like to be able to do
niftyplayer('niftyPlayer1').stop()
to stop the audio of the previously running player. Is it possible to store the current ID number somewhere and call it back when needed?
Thanks for the help, i'm a PHP programmer who needs some support with Javascript - I know what I want to achieve, just don't know the commands to do it!
Thanks
If you assigned each niftyplayer object a classname, f.x. ".players", then you could loop through each player, like this:
function toggle_visibility(id) {
$(".players").each(function(){
playerId = $(this).attr('id');
if(niftyplayer(playerId).getState() == 'playing') {
//Stop the currently playing player
niftyplayer(playerId).stop();
//Hide the div that was playing
$("#" + playerId).hide();
}
});
//Start the new player
niftyplayer(id).play();
$("#" + id).show();
}
So what this actually does, is it loops through all the players on the website. It checks if the status of each player is equal to "playing", if it is, then it stops it and hides the div tags. Then it starts the new player and shows that div tag.
I think this does it. Try it out.
I have a much better solution after I noticed a very nasty bug / 'feature' when using Internet Explorer in conjunction.
I had noticed that in IE the pages were taking a very long time to load when I had a lot of hidden Nifty Players, I looked closer using Fiddler and found that each instance of NiftyPlayer was preloading the MP3 in full, rather than loading on demand as with Firefox and Chrome etc.
This meant that a page with 100 items (each item having up to 4 MP3s) took several minutes to load at times with obvious data transfer implications.
My solution which is rather simpler (but maybe clunkier) than Indyber's is to just use
function toggle_visibility(id,mp3location) {
// hide all players
$(".playerarea").html('');
// show clicked player
$('#' + id).html('<embed src=\"http://www.xxx.com/shop/flash/player.swf?file=http://www.xxx.com/mp3/' + decodeURIComponent(mp3location) + '.mp3&as=1\" quality=high bgcolor=#000000 WMODE=transparent width=\"161\" height=\"13\" align=\"\" type=\"application/x-shockwave-flash\" swLiveConnect=\"true\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" class=\"playerNew\">');
}
which works fine with IE, and also solves the problem of not being able to stop the players from playing in IE