Image over Youtube video with a fade - javascript

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.

Related

switch video tags or load new scource

I have a question about performance on the video tag.
Is it better to load a new video or to preload them in there own video tag and just disable the overlaying video tag.
The effect i want to achieve is seamless transition in to the next video who starts with the last frame frome the other video.
Could anyone tell me if there's a performace difference.
Thanks in advance,
Bastien
If you want the next video to start immediately the previous finished then you will need to have started loading it in advance, to get the metadata and to populate the player buffer.
Doing this with two players or video tags as you describe is quite a common technique and will work.

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

Javascript - How can I get the thumbnails of a YouTube video (the one that shows when you hover to slider)?

I am creating a custom slider for a YouTube video, and currently using the javascript player API.
How can I get those thumbnails when you hover to slider? or is there any way to do it?
Edit:
What I need is the thumbnails that you can see when seeking through the video. This is also visible as a sprite when you try to create a video clip from one of your uploaded video. But you need to login/authenticate for that..
you can use ffmpeg to get the thumbnail of video.
Below is the link for how to use ffmpeg in C#
http://www.codeproject.com/Tips/111468/FFmpeg-Tutorial
Take a look at the queuing functions, according to specs cueVideoById function should load the specified video's thumbnail and prepares the player to play the video, and does not load the video.

HTML5 video background and transition

I am making a website for a friend of mine and he wants a really complicated one. Between the menupoints there are videos and the content is displayed on the last frame. So I thought I could use the videos (about 2 seconds long) as a background and fade the content in after two seconds. How should I go about this?
what I'd do is have the content as a hidden div. When you play the video attach an onended event to it and use that to hide the video element and reveal the content - that way they always stay in sync - for instance see something like this Add a div to replace Video after Video Plays Through

How to make a slider stop when video is playing?

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.

Categories

Resources