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.
Related
Does anyone know if one can connect a HTML5 Video with the presentation javascript, Reveal.js so that if I play a video on one slide, when that video is complete, it would automatically progress to the next slide?
Reveal.js has it's own eventHandler
Reveal.addEventListener( 'customevent', function() {
console.log( '"customevent" has fired' );
} );
But I cannot find any specific documentation on if elements inside a slide can trigger the nextSlide functionality.
SO... here is the solution, or at least the answer that I came up with.
You have a series of SECTIONS that are acting as the slides, and a video in one of those slides.
in THAT slide, you need to add the following script:
<script>
var video = document.getElementById("myVideo");
video.onended = function(e) {
Reveal.next();
}
</script>
Make sure you label your video element with an ID tag, and then call that ID tag in this script. The Reveal.next() is part of the built-in API that will automatically progress the slideshow.
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
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 have a button, when you click on that button, I'm doing a fadeToggle() to show or hide a popup.
That popup is appearing on top of a flash video that autoplays.
So, what I want to do, is when the popup is visible, I want to pause the video. When it's hidden, play the video.
My video player already support those function. So this is working fine:
videoPlayer.pause();
videoPlayer.play()
So what my FadeToggle() would looks like ? Right now I have this code:
$("#categorySlider").fadeToggle('fast', function() {
var videoPlayer = document.getElementById("videoContainer");
videoPlayer.pause();
});
I'm missing the play() part here, but I cant figure out the syntax to add it?! If fadeToggle is not the right thing to use, any jquery or javascript is fine!
Any helps please?
You could use the jquery :visible selector to find out if #categorySlider is visible or not and depending on that pause or play the video.
$("#categorySlider").fadeToggle('fast', function() {
var videoPlayer = document.getElementById("videoContainer");
if ($("#categorySlider").is(":visible"))
videoPlayer.pause();
else
videoPlayer.play();
});
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()