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.
Related
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
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();
}
I have bootstrap carousel which includes both images and videos and it works fine. But when we move to next slide, currently playing video in active slide should be paused.
Now the video is still playing even after moving to next slide.
Any help is much appreciated.
Thanks!!
$('#myCarousel').carousel({
interval: 3000
});
DEMO
You can call a pause event on html5 video:
document.getElementById('someelement').pause()
More video events here
Answering your question - you can use slide.bs.carousel event combined with the above line to stop video when slide event occurs:
$('#myCarousel').carousel({
interval: 3000
}).on('slide.bs.carousel', function () {
document.getElementById('player').pause();
});
See the updated jsfiddle
the best way is to start the fist one using autoplay and the you can use jquery to start and stop them. I have several carousel items where only the first 3 have videos.
I solved it like this:
<script language="JavaScript" type="text/javascript">
$(document).ready(function () {
$('.carousel').carousel({ interval: 8000 })
$('#myCarousel').on('slide.bs.carousel', function (args) {
var videoList = document.getElementsByTagName("video");
switch (args.from) {
case 0:
videoList[0].pause();
break;
case 1:
videoList[1].pause();
break;
case 2:
videoList[2].pause();
break;
}
switch (args.to) {
case 0:
videoList[0].play();
break;
case 1:
videoList[1].play();
break;
case 2:
videoList[2].play();
break;
}
})
});
</script>
this assumes that the videos in your DOM are ordered in the order of your carousel and that there are no videos above, as you have a case you could just grab the video by it's ID, that would always work.
If you are using Youtube iframe videos, then I achieved this by listening for the carousel slide event slide.bs.carousel :
https://getbootstrap.com/docs/4.4/components/carousel/#events
Then if this event occurs, I would then use player.pauseVideo() functionality of the Youtube iframe API with JavaScript:
https://developers.google.com/youtube/iframe_api_reference#Playback_controls
Sample snippet:
// When a slide occurs, pause the current iframe video that is playing
// player.pauseVideo():Void - Pauses the currently playing video.
// Reference: https://developers.google.com/youtube/iframe_api_reference#Playback_controls
$('#moviesCarousel').on('slide.bs.carousel', function(event) {
// The variable "players" contain each Youtube Player for each iframe video
// Reference: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
// event.from - The index of the current video (before the slide occurs)
// - It is also the index of the corresponding player for the current video
// Reference: https://getbootstrap.com/docs/4.4/components/carousel/#events
players[event.from].pauseVideo();
});
Where:
event.from corresponds to the index of the carousel video item before the slide occurred
players are a list of YT.Player instances, where each instance controls 1 particular iframe Youtube video (so 1 video item among the carousel video list). This assumes that the order of carousel videos maps to the same order of its corresponding YT.Player instances
For a complete working html code, please refer to my answer in another thread:
Pause Bootstrap carousel when playing Youtube video
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.
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()