We Keep Coding

Play multiple videos on page with jQuery each() function

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.

HTML5 Video OnComplete Next Slide Reveal.js

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.

Checking for end of video on iPad

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');
});

Javascript: how to use multiple play buttons in audio player

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

playing event in html5 video TAG

I have tried like this
document.getElementById('myVID').onplaying = alert("Playback started");
But, the alert is not coming. I have tested it in chrome. Is there any issue in this code?. Otherwise this event is not supported.

Working JSFiddle: http://jsfiddle.net/E7FhU/
I would say change your code to be like this because as #Passerby said, alert returns undefined and you need to assign a function. Additionally, this can be accomplished with simple javascript.
<script>
var video = document.getElementById('myVID');
video.onplaying = function(e) {
/*Do things here!*/
alert("hello video");
}
</script>
When you click play the alert is displayed.
References:
Detect when an HTML5 video finishes