We Keep Coding

play and pause the videos in the bxslider?

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

I want to add a css class selector to an onclick function in a vimeo-video slider/carousel plugin that came with a Timber template I bought

Want to achieve: a thumbnail gallery of video selections to work like a playlist. Each thumbnail is a clickable link to load & play their respective video in the central screen above gallery.
gallery with player/slider above
And here's a bit of JS from the plugin, that (I think) is the function for clicking Next: (Demo Link Below)
var z = a('<a href="#" />').attr("id", "tms-prev").addClass("tms-arrow-nav").appendTo(b),
C = a('<a href="#" />').attr("id", "tms-next").addClass("tms-arrow-nav").appendTo(b);
z.each(function() {
a(this).on("click", function(a) {
a.preventDefault(), p.autoAdvance && b.data("loaded") && y.resetSlideshow(), y.prevSlide()
})
}), C.each(function() {
a(this).on("click", function(a) {
a.preventDefault(), p.autoAdvance && b.data("loaded") && y.resetSlideshow(), y.nextSlide()
})
}), p.lazyLoad && b.find(".tms-arrow-nav").css({
display: "block"
})
}
What I've done: Linked thumbnails to use - a href target="name" to target the iframe for the central player screen. Since the video player is actually a slider plugin, I've run into a slight conflict.
The problem: Once integrated(my addition), the video loads on the second (of 3) slides on pause. User wouldn't know it was there, but - when the slider is rotated by clicking the NEXT arrow btn, the video begins to play from the slider's plugin function. This would be fine if the slider rotated from the user initially clicking the Play thumbnail. In fact, a preferable effect.
Solution I'm seeking: to include the classname for the thumbnail links in the plugin's existing click function where the NEXT slide button triggers rotation - basically adding my classname to $(this) of its onclick function, so clicking on any thumbnail link in the gallery will not only load the video (as it does now) but also trigger the slide to rotate, provided that the slider plugin plays video when rotated (as it does now).
Options: If problematic, I can go with disabling slider rotation altogether... if that would remove conflict to begin video play.
Codepen: Doesn't seem to work
SO, I hosted a demo online: demo of slider
1) the video playing at header on open is not the slider, slider is below this and directly above the gallery and says Slider Caption over a mountain icon.
2) Only the top left thumbnail (2 Narbonne) is linked. When clicked, the video will load on the 2nd slide buit it wont seem like anything happened. rotate with the Next arrow and you'll see it. Feel free to use the demo in any way necessary - its only for this purpose.

Prevent Slider Revolution from pausing HTML5 video

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" );

Autoplay videos on scroll as window focuses

A video blog where the videos are 800x600 pixels (take most of browser screen).
I am using html tag with attributes 'loop' and 'autoplay'
With more then 10 videos so far, the browser plays all of them a stalls!
I need a piece of code to play one video at a time as the user scrolls to the video in focus and pause the video as soon as out of scroll focus.

If the videos are evenly spaced at 600px high and lets assume the margins on the videos are at least 50px, that means each video has a functional height of 700px. So you want to play the video that is closest to the top of your screen.
const qVideos = document.querySelectorAll('video');
^ This assumes you are using the video element to play videos and is collecting them.
const calcVideoNumber = scrollPositionY => Math.floor( scrollPositionY / 700 );
^This function takes in your scroll position and returns the number of 700px (this should be your video section height) high sections you are down the page.
const stopPlaying = videos => Array.from(videos).forEach( video => video.pause() );
^ Stops playing all of the passed videos
window.onscroll = event => {
stopPlaying(qVideos);
qVideos[calcVideoNumber(event.scrollY)].play()
}

Autoplay once in HTML 5 and/or video.js

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
}