How to make a slider stop when video is playing? - javascript

I have this website which has a slider in the middle of the page. I put a video in the slider but the problem is when I play the video I need the slider to stop its effect so the video can play. Any ideas how to make this happen.
Here is the website it is on.
http://flamingoroadchurch.com.previewdns.com/

You need to attach an event listener to that video somehow. Have you looked at Vimeo's js api?
http://vimeo.com/api/docs/moogaloop
You may want to take a close look at that js_onLoad function.
p.s.: You might get better answers around here if you accepted one. You do this by clicking the little check mark next to an answer.

Related

How make slider work only if is in viewport?

Hello!
I would to ask, how can I make this slider to work only if slider is on the viewport?
I use this slider: enter link description here
Thanks for your help!
Their Javascript does not support it. They do not return the interval that is created, so it cannot be cleared (this is how they pause it). Nor do they have a pause function, except for the one on hover. You will need to update their Javascript to support the ability to pause and play.

With reveal.js, how can I make slides change upon completion of embedded media?

I am using reveal.js to make a relatively simple slideshow. I am not using basement levels, fragments, etc. Just several slides with a few bit of text and images, with audio on some slides, and video on others.
I'd really like to have the slide move on to the next upon the completion of the media. I would like it to feel as though there was someone changing slides as they would do giving this presentation in a live setting.
There is a variety of run times, some are only 0:15 and some are up to 4 minutes.
How can I accomplish this?
In general, bind a listener to the completion event and advance the slide.
video.addEventListener('ended', function() {
Reveal.next()
});
I think the audio-slideshow plugin does exactly what you are looking for.

Using rangeslider.js for an HTML5 audio time scrubber

I am digging into the finer points of Andre Ruffert's rangeslider.js and I am having difficulty into incorporating his code into controlling and reacting to a simple HTML5 audio element.
I see that you can programmatically change the value of the slider with the click of a button, but how would I link the audio to update automatically with the audio as it plays, and modify the audio by clicking and dragging the thumb of the slider?
I've made a working demo here: http://jsfiddle.net/alan0xd7/79ff562k/
This uses the timeupdate event to update the range slider.
However there are some quirks when you try to change the time while it is playing - sometimes it snaps back to where it was. I believe this is some sort of race condition, because as you are sliding the track, the timeupdate event would fire and change it back to the current time. To make it work properly, you probably need to introduce some additional logic like pausing the audio while the slider is being dragged.
Hope this helps!

Video with timed image overlay

I was wondering if anyone could help me with HTML5 video with image overlays that are timed. I want the images to display and disappear at certain times, which will make the video pause and resume on the click of a button. I want to know the best approach to this in regards using HTML5, javascript etc.
I am using the video tag in HTML5 with Dreamweaver CS6 at the moment and I have full screen video working, with an image overlaid using the z-index, but I can't get it to display and disappear at a certain time.
Any ideas?
probably you have to add some event listener to your video:
timeupdate , loadstart, ect to manage the visibility of your image in overlay

Image over Youtube video with a fade

Can anyone help me with some javascript here as I got no knowledge, but I have this idea...
This is what I have on my mind:
-I want an image to be over the youtube video. (image inside of css, so no img src please)
-On click of the image (image fades out) and video loads up and start playing.
-Once video is done (I don't care if I have to add values of time when video will end manually) the image will fade in again over the video.
I have found an script before that gives this option to put image over youtube video, but it did not had fade effect and it worked for 1 day only. Right now it doesnt works...
Cheers and thank you in advance.
It is possible to build a custome video player using the youtube api. You can handle any events you want, like start stop, pause etc. It's even possible to force the user to click a like button, ads or whatever. But it's a bit of work.

Categories

Resources