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
Related
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'm trying to use this slider: http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/ but want to play a different audio file, each time the slide loads.
The way I imagine it working, is for the user to click play on the first slide, the audio to finish playing, then for the slide to change and it automatically plays the next audio file and so it continues until all slides are played through.
I've gotten it to the point where the slider changes when the audio has stopped, but cannot figure out how to play the next audio file, one after the other.
I'm very new to jQuery and am struggling a lot. Any help would really be appreciated!
Here is my work in progress: http://dailycrow.me/actualsite/
Thank you.
What I would do is to handle the audio playing with an scripting language such as PHP and call the needed method with parameters with Javascript or JQuery.
You can embed HTML with PHP so the audio can be played. Something like this:
$audioFile = "wishedAudioFile.mp3";
echo '<embed src="'.$audioFile.'" hudden="true" autostart="true"></embed>';
you can maintain an array of sources, where each index refers to a slide index, and from looking at this doc, you can use the onAfterChange event, code would be something like:
var audio = new Audio(), audSrcList = [
'slide1.wav',
'slide2.wav',
'slide3.wav',
'slide4.wav'
...
];
function afterSlideChange(slide, index){
audio.src = audSrcList[index];
audio.play();
};
...
$.Slitslider.defaults = {
...
// callbacks
onBeforeChange : function( slide, idx ) { return false; },
onAfterChange : afterSlideChange //CHANGED here
};
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.
I currently have an HTML5 video event issue in Safari. I am playing a single video on my page. The video loads and plays correctly. However, the play event does not always fire. If the user:
Clicks play
Watches the video to the end (ended event fires)
Clicks play again
The play event does not fire on the second click. If I pause/play the movie at that time, the correct events fire.
How can I make the video tag's play event fire if the video has completed and the user presses play again?
drawVidPlayer is called with the videos index as part of the page render
function drawVidPlayer(vindex){
var turl=vidList[vindex]['thumbUrl'];
var vurl=vidList[vindex]['url'];
var valias=vidList[vindex]['type'];
destroyVidPlayer();
$('#mediaspot').css('backgroundColor', '#000000');
$('#mediaspot').show();
$('#mediaspot').html('<video controls="controls" id="twnvideo" poster="'+turl+'" style="height:225px; width:460px;"><source src="'+vurl+'" type="video/ogg" /><source src="'+vurl+'" type="video/mp4" /><source src="'+vurl+'" type="video/webm" />Your browser does not support the video tag.</video>').appendTo('#wrap_media_vod');
var velem=document.getElementsByTagName('video')[0];
velem.addEventListener('play', initVidTimer, false);
velem.addEventListener('pause', killVidTimer, false);
velem.addEventListener('ended', killVidTimer, false);
}
function destroyVidPlayer(){
var velem=document.getElementsByTagName('video')[0];
if(velem!=undefined){
velem.removeEventListener('play', initVidTimer);
velem.removeEventListener('pause', killVidTimer);
velem.removeEventListener('ended', killVidTimer);
}
$('#mediaspot').empty();
$('#mediaspot').html('');
}
function initVidTimer(){
if(activityTimer==null){
external.OnUserActivity(19);
activityTimer=setInterval(function(){
external.WriteLog('activity timer running');
external.OnUserActivity(19);
}, 5000);
}
}
function killVidTimer(){
clearInterval(activityTimer);
activityTimer=null; // Kill keepAlive timer
var velem=document.getElementsByTagName('video')[0];
external.WriteLog(velem.ended);
}
HTML5 now specifies that the browser must throw the timeupdate, paused, and ended events when the playback position reaches the end of a media file, but the spec wasn't always that clear. As a result, this behavior is inconsistent between browsers. Some don't set paused=true or fire the paused event when the file ends.
In your Safari issue, paused is still equal to false when the video starts to play for the second time - so there is no reason for the browser to fire the play event again.
This may no longer be an issue in Safari 6, but it still breaks in IE 9. Take a look at the End Events column in this chart from longtailvideo.com - they outline the inconsistencies well.
It would easy to normalize this issue with a couple lines of code - like this:
$("video").on("ended", function () {
if (!this.paused) this.pause();
});
This puts the video in the paused state on ended, so it will throw the play event correctly on replay.
You can try this working sample in IE 9 or to see what I mean on this jsfiddle: http://jsfiddle.net/PWnUb/
I had the same issue, I solved with a bit of jquery:
function videoend(){
var duration = $("video").get(0).duration;
var current = $("video").get(0).currentTime;
if(current==duration){
//Whatever you wanna do when video ends
};
}
$(document).ready(function(){
setInterval("videoend()", 200); //or any other time you wanna use
});
Hope this helps.