So i'm trying to use two play buttons in my audio player, this is because i have one in audio player and other in sidebar for example.
Follows my jsfiddle: http://jsfiddle.net/LqM9D/5/
Someone can help?
Obs: i'm using html5 audio and jquery/js on my player
You're re-using the same ID twice. IDs must be unique. Correct that and it works fine. And since you're using jQuery, you could use:
window.player = $('#player')[0];
$('#playpause, #playpause2').click(function () {
if (player.paused) {
player.play();
this.innerHTML = 'pause';
} else {
player.pause();
this.innerHTML = 'play';
}
})
jsFiddle example
Use a common class on your buttons, instead of ids. IDs need to be unique. Then set jQuery click method. Updated
i have a similar question. I would like to list multiple play buttons and be able to use a listenEvent to trigger play and pause for each. However I can't seem to wrap my head around it. It works fine when I code the first button but when I try to introduce a second player it breaks.
I wish to keep my audio tags as html and call them in the js.
Here is a link so it's more understandable
https://codepen.io/my-mosas/pen/WNzvoGY 0123
Related
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.
This is a simple query but somehow i can't seem to put a finger to what seems to be going wrong.
I have two buttons namely 'problem' and 'need'. On clicking the former, the audio file 1 needs to be played, similarly when later is clicked the audio file 1 should stop and audio file 2 is played. The code which i have written for the same is this:
var playing = false;
$("#problem").click(function(event) {
$("#audio").html('');
$("#audio").html('<source src="audio/expertise/file1.mp3" type="audio/mp3"><source src="audio/expertise/file1.wav" type="audio/x-wav"><source src="audio/expertise/file1.ogg" type="audio/ogg">');
playing = true;
});
$('.need_btn').attr('id', 'need_btn');
$("#need_btn").click(function(event) {
if (playing == true) {
$("#audio").trigger('pause');
playing = false;
if (playing == false){
$("#audio").attr('src','<source src="audio/expertise/file2.mp3" type="audio/mp3"><source src="audio/expertise/file2.wav" type="audio/x-wav"><source src="audio/expertise/file2.ogg" type="audio/ogg">');
$("#audio").trigger('play');
playing = true;
};
}
else{
/*$("#audio").trigger('play');*/
};
});
this works fine for playing file 1 , pause file 1 when second button is clicked but does not play file 2.
What can i change to make it work?
I think the problem in your case is this piece of code:
$("#audio").attr('src','<source src="audio/expertise/file2.mp3" type="audio/mp3"><source src="audio/expertise/file2.wav" type="audio/x-wav"><source src="audio/expertise/file2.ogg" type="audio/ogg">');
I just went through the official documentation and it seems like you are using the .attr in an incorrect way. I haven't tried the code I'm going to post, but assuming you do want to set the attributes of the source element, you might want to try something on these lines:
$( "source" ).attr({
src: "audio/expertise/file2.mp3",
type: "audio/mp3"
});
Now I understand you have the .ogg , .wav and the .mp3 versions. So I think it's also possible you directly set the html for the element with id "audio" like you did with file1. I'm suggesting something like this:
$("#audio").html('<source src="audio/expertise/file2.mp3" type="audio/mp3"><source src="audio/expertise/file2.wav" type="audio/x-wav"><source src="audio/expertise/file2.ogg" type="audio/ogg">');
This would set the html for the corresponding element with the required markup. I hope this gets you started in the right direction.
I can't seem to listen for onended on a video on iPad(Safari)...I want to remove a class that I was able to add when the play button was pressed, but I can't seem to track down when the video ends (works well every where else including iphone, just need it for iPad/Safari)
link here: http://www.artandseek.net/meyerson/tour/
code snippet here
$(".playBtn").click(function(){
var thisVideo = $(this).prevAll(".img-wrap").children(".togglePlay").get(0);
thisVideo.onended = function(e) {
$(this).fadeOut().parent(".img-wrap").removeClass("playing");
$(this).parent().next("h2").fadeIn();
classie.remove( thisVideo, 'tabletActive');
}; ...
I was able to find the answer here:
Bind Play/Pause/Ended functions to HTML5 video using jQuery
using this:$(thisVideo).bind('ended', function () {
console.log('working');
});
I'm trying to use jQuery to control an HTML5 audio element, but I'm no genius with JS.
What I want is for the player to start on page load, which I've done, but when the play button is clicked, I want to check whether or not the audio is playing.
If it's playing when clicked: Stop the audio.
If it's not playing when clicked: Play the audio.
If you could help, it'd be much appreciated.
Source here: http://www.julake.co.uk/media/loader.php?page=contact
Many thanks,
you should use a single play/pause toggle button in which you need to check if your audio is paused or not
var audioplayer = document.getElementById("audio-player");
$("#play-bt").click(function(){
if (audioplayer.paused) {
audioplayer.play();
}
else {
audioplayer.pause();
}
$(this).toggleClass('pause'); /* style your toggle button according to
the current state */
})
var audio = new Audio("http://www.w3schools.com/html5/song.ogg"); //or you can get it with getelementbyid
audio.addEventListener('canplay', function() {
//code, when audio can play
audio.play(); //this function will start the music
})
with audio.play() function you can start it. You don't need JQuery
If you wish to use a jquery selector or have a jquery selector already, you can add [0] to get the native dom element.
So an example that actually uses jquery would be.
$('audio')[0].pause()
[EDIT: Sorry to those who already answered -- in my sleep-deprived state, I forgot that this particular situation is a YouTube movie, not the JW FLV player. I can see that there is more extensive documentation on interacting with YouTube movies, so I will pursue that, but any more information is also welcome]
I am using embedded YouTube videos in a collection of divs that are being rotated by using the jQuery cycle plugin (http://malsup.com/jquery/cycle/).
I would like the cycle to stop when I click on one of the movies to start it playing, but I can't figure out how to attach a jQuery event handler to the player object.
Here's what my current code looks like (you can't directly select an object tag with jQuery, so I select the parent div and then get the object element as the first child):
$("div.feature-player").children(":first").click(function(event) {
$('#features').cycle('stop');
});
But that doesn't do the trick. I'm not a Flash author, so I'm not really familiar with ActionScript, and I've never set up an interaction between JavaScript and a Flash movie before.
The YouTube player API is pretty straight-forward. You just have to listen to the onStateChange event and control the cycle plugin depending on the state:
Here's a working demo: http://jsbin.com/izolo (Editable via http://jsbin.com/izolo/edit)
And the pertinent code:
function handlePlayerStateChange (state) {
switch (state) {
case 1:
case 3:
// Video has begun playing/buffering
videoContainer.cycle('pause');
break;
case 2:
case 0:
// Video has been paused/ended
videoContainer.cycle('resume');
break;
}
}
function onYouTubePlayerReady(id){
var player = $('#' + id)[0];
if (player.addEventListener) {
player.addEventListener('onStateChange', 'handlePlayerStateChange');
}
else {
player.attachEvent('onStateChange', 'handlePlayerStateChange');
}
}
Flash movies are pretty much black boxes as far as javascript is concerned. If the SWF you're using wasn't written to interact with javascript then you're probably out of luck.
You'll either need to figure out what javascript methods the movie you're using exposes (hopefully it has documentation), find another one that does provide javascript interaction, or write your own SWF to handle it.
What you're looking for is the flash ExternalInterface class, which is used for communication from flash to javascript and from javascript to flash.
If you're embedding the player using swfobject you're going to want to use swfobject.getObjectById to get a reference to the movie. Read the docs to see why you need to do this.
Also you'll need to set {wmode:"transparent"} for the player in order for it to bubble up click events to JavaScript.