I am working on bxslider jquery plugin. I am including the videos also. If the current slider is video means when i will click the next button, the current video will be pause and when i come again that video slider that video will be auto play where the video was paused.I need to handle all the video like this. I use video tag for video.
please try this.
Here is the API document of bxslider.
onSlideBefore
Executes immediately before each slide transition.
So we pause all the video when this event triggered.
$bxslider.find('video').each(function() {
this.pause();
});
onSlideAfter
Executes immediately after each slide transition. Function argument is the current slide element (when transition completes).
So we play the video which is in current active slide.
// arguments:
// $slideElement: jQuery element of the destination element
// get the video element, assume only one video in each slide
var video = $slideElement.find('video')[0];
// if this slide contains video and video has been played then continue the video
video !== undefined && video.currentTime !== 0 && video.play();
Related
I have a list of bootstrap columns (3 per row) with each one having a Vimeo video inside.
How can I do it so that when you hover on each column, the video inside this column autoplay, and when you hover off, this video pauses?
I tried the below so far but it's crashing the iframe:
$('.product-card-media').on('mouseover',function(){
var player = $("#"+this.id);
froogaloop = $f(player[0].id);
player.mouseover(function(){
froogaloop.api('play');
}).mouseout(function(){
froogaloop.api('pause');
});
});
Trying to play a video on mouseover and rewind to beginning and show initial thumbnail image on mouse out.
Here's what I have so far:
<video poster="image.jpg" src="video.webm" id="id0" onMouseOver="id0.play()" onMouseOut="id0.pause();currentTime = 0;window.location.reload()" onclick="window.location='video.webm';id0.pause()" loop title="video.webm" ></video>
But that just reloads the entire page and not just the thumbnail image.
Any ideas?
Use the load() method like so:
function stopReload() {
vPlayer.pause();
vPlayer.currentTime = 0;
vPlayer.load();
}
See FIDDLE
I'm using the Themepunch Revolution slider in a project, which shows a single video slide in HTML 5.
When I click on it, it pauses, which I don't want.
The <video> element in the page is generated by the slider plugin.
Here's what I tried so far:
$('body').on('click', 'video', function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
This is the code in the slider library:
html5vid.find('video, .tp-poster, .tp-video-play-button').click(function() {
if (html5vid.hasClass("videoisplaying"))
video.pause();
else
video.play();
})
I also tried catching the pause event, but it never fires:
$('body').on('pause', 'video', ...);
For Revolution Slider 6.x, it's easier, just select the video layer option > Content > (Scroll down) Advanced Media Settings > Set "No Interaction" off
This will disable the click to pause/play also remove controls, you end up with a playing video with no interactions, also don't forget to set Loop Media on for complete experience
Revolution Slider No Interaction Setting to prevent controls and stop click for play/pause:
Hey it is 2019 but anyone who look for solution is that :
Put transparent shape layer onto video layer as full width and height.
Make sure put this layer one step above the video layer as showing below(this shape looks like it below the video layer but in rev slider animation settings the more bottom the more up on the front-end i hope i make it clear :)
Layer positions on rev slider animation settings
Try
html5vid.find('video, .tp-poster, .tp-video-play-button').unbind('click');
Replace html5vid with whatever element the script is looking to find in.
EDITED
...or better yet, try to unbind click on the video element as follows:
$('video').unbind( "click" );
I am using reveal.js for a presentation, in one slide there is an audio file being autoplayed. I want the audio to fade out when entering the next slide, what I can think of now is set the audio file outside of any sections and set up a event listener on slidechanged. When, say the 1st slide is the one which the audio is on, 1st slide is on the audio should autoplay, once it's not 1st slide, the audio should fade out.
I am wondering is there any easier way to set up the transition within a section. Here is what I have for now, trying to fade out the audio on every slidechanged event without considering the situation when it goes back to the 1st slide. The js code below is copied from another post.
<section>
<audio data-autoplay loop id="sound"><source src="assets/audio.mp3"></audio>
</section>
<script>
Reveal.addEventListener( 'slidechanged', function( event ) {
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
var sound = document.getElementById("#sound");
var fadePoint = sound.duration - 2;
var fadeAudio = setInterval(function(){
// Only fade if past the fade out point or not at zero already
if ((sound.currentTime >= fadePoint) && (sound.volume != 0.0)) {
sound.volume -= 0.1;
}
// When volume at zero stop all the intervalling
if (sound.volume === 0.0) {
clearInterval(fadeAudio);
}
},200);
</script>
I want an embedded video (MP4) to autoplay once only in video.js then either return to a poster or the first frame so a click will commence play for a 2nd time.
Currently its autoplaying but stopping on the last frame and the only way i can re play is by dragging play bar to the left. (except in crome where it plays from the start with a click)
Here's how you can go back to the first frame.
suppose your video.js player object named "player":
player.on("ended", function () {
this.currentTime(0); //move to start
}