We Keep Coding

Pause HTML5 video in slider (flickity)

I'm currently adding some slides into a slider (using flickity) and for some reason I can get the first video to pause when there is an event change when the slider is moved to the next slide. But if I play the next video in the next slide, and then move back to the previous or next slide, the video will not pause.
Here's what I'm doing so far:
var testimonials = $('.case-studies__testimonial-group');
testimonials.on( 'select.flickity', function( event, index ) {
$(".testimonial-item .content-vid").get(0).pause();
});
Strange that it would work on the first one when there is an event change, but not on the second one.
I feel that is has something to with fact that the first video is already paused that is not pausing the second video on the slider change? Not sure if there is something else I should be looking for.

Ok, so after messing with it some more, it appears that this works:
var testimonials = $('.case-studies__testimonial-group');
testimonials.on( 'select.flickity', function( event, index ) {
$ $('.testimonial-item').find('video').each(function() {
this.pause();
});
});
Basically, when it starts the event change within flickity, that will find the video and pause it outright. Which is fine if it pauses ALL the videos since that's the intended purpose anyways.
rubberduck -> FTW

How to not trigger video ended event when it has EventListener

I have a webpage with three small html5 videos. When this part of the page loads the first video plays, then when it ends the second video plays, and when the second ends then the third plays. I did this with addEventListener for 'ended'. My code looks like this:
//first video
var player1=document.getElementById('firstVideo');
player1.addEventListener('ended',vidHandlerLow,false);
//second video
var player2=document.getElementById('secondVideo');
player2.addEventListener('ended',vidHandlerMedium,false);
//third video
var player3=document.getElementById('thirdVideo');
player3.addEventListener('ended',vidHandlerHigh,false);
player1.play();
function vidHandlerLow() {
player1.pause();
player2.play();
}
function vidHandlerMedium() {
player2.pause();
player3.play();
}
function vidHandlerHigh() {
player3.pause();
}
The issue I'm having is that i'm trying to play a single video on hover without triggering the ended event which will play the rest. I have tried:
onmouseover="this.removeEventListener('ended'); this.play();"
But the ended event is still triggered. If I hover over video1 then video1 will play then two and three when only the hovered video should play. Any suggestions how to play a single video without my video ended events from running?

Since I only need the videos to autoplay once I was able to remove the event listeners in the functions I call on 'ended' like this:
function vidHandlerLow() {
player1.pause();
player1.removeEventListener('ended', vidHandlerLow);
player2.play();
}

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.

jwplayer: using seek(), onTime() and stop() to play part of the video

I am using latest JW Player cloud hosted version.
I need to seek the video to start from certain position and stop at certain position using seek(), onTime() and stop().
jwplayer().onReady(function() {
jwplayer().seek(300).onTime(function(event) {
if(event.position>330) {
jwplayer().stop();
}
});
});
The video starts and stops with the above command, but if the user clicks on play button again, it starts from beginning instead of the time specified in seek().
I have advertisement associated with this video.
Any help!
Thanks

you could try using onBeforePlay() method, its fired just before playing, as:
jwplayer('player').setup({
......
});
jwplayer().onBeforePlay(function(){
jwplayer().seek(300);
});

Using jQuery to control HTML5 <audio> element

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()