PDA

View Full Version : Slider with video Issues


Chapo
07-12-2014, 07:20 PM
OK... i want to create only 2 slides, the first is an image and then a video. I've created many sliders with images with their transitions and works fine, but i've never comined it with a video. This is what i want to do.

First the image comes in with a fade in for a few seconds and then it fades out, then the video fades in and i want it to auto play and re-start the video again when its over. So basically it will only make 1 transition from image to video and stay there. I've tried many sliders but its a headache to do this, so
i made a demo with flash so you could get an idea of what i want (it doesn't have the re-start player).

Demo Site
www.imperiografico.com

Ricky55
07-12-2014, 11:11 PM
Alright Chapo? not been on for a while, hope you are well.

Its not really a slider its just a simple animation. How are you handling the video? YouTube or HTML5 video element?

I'd just absolutely position the image above the video using z-index so it sits above the video and then just fade this in and out, when that ends fade the video in.

You can use jQuery or even just CSS depending on what browsers you need to support.

If you do in jQuery you'll have more control. For instance once the image animation ends you can start your video.

HTH

Chapo
07-13-2014, 01:58 AM
Hey i'm fine and kinda of lost but here i am...

I tried using dreamweaver transitions but i couldnt do it, i didn't knew how to automaicaly fade out the image wihout appearing again so the video could appear and play. I could use youtube or just html.


I tried several jquery but i had a hard time configuring and coding to make happened, its muj easier if it was only images. Still stuck with this issue!

Ricky55
07-13-2014, 04:28 PM
You could do something like this. Whether you use Youtube or HTML5 you can use jQuery to play the video once the animation has completed.

Not shown the video here but this should get you started.

Cheers

Ricky


<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8">

<title>Video Test for Chapo</title>

<style type="text/css">
* {
margin: 0;
padding: 0;
}

.video-wrap {
position: relative;
}

.anim {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

.the-video {
width: 454px;
height: 278px;
background: silver;
display: none;
}
</style>

</head>
<body>

<div class="video-wrap">
<img class="anim" src="test.png" alt="">
<div class="the-video"></div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>
$(document).ready(function(){
$('.anim').fadeOut(2000, function(){
$('.the-video').fadeIn(2000, function(){
alert('Video Starts to play!');
});
});
});
</script>

</body>
</html>


To play you'd use

$('#my-movie').play();

Ricky55
07-13-2014, 04:35 PM
Another way to do this would to just edit the video and animate the image inside the video, you could this in Final Cut Pro or something.