logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 07-12-2014, 06:20 PM   #1
Chapo
Chapo's Avatar
 
Join Date: Jun 2008
Posts: 567
Red face Slider with video Issues

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
__________________
People laugh at me because i'm different, but i laugh at people because they are all the same
Chapo is offline   Reply With Quote
Old 07-12-2014, 10:11 PM   #2
Ricky55
Ricky55's Avatar
 
Join Date: Oct 2005
Location: West Yorkshire, UK
Posts: 1,855
Default

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
__________________
Qwerty Design

Check out my blog for web design insights.
http://www.qwerty-design.co.uk/
Follow me on Twitter: @QwertyDesignUK
Ricky55 is offline   Reply With Quote
Old 07-13-2014, 12:58 AM   #3
Chapo
Chapo's Avatar
 
Join Date: Jun 2008
Posts: 567
Default

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!
__________________
People laugh at me because i'm different, but i laugh at people because they are all the same
Chapo is offline   Reply With Quote
Old 07-13-2014, 03:28 PM   #4
Ricky55
Ricky55's Avatar
 
Join Date: Oct 2005
Location: West Yorkshire, UK
Posts: 1,855
Default

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

Code:
<!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
Code:
$('#my-movie').play();
__________________
Qwerty Design

Check out my blog for web design insights.
http://www.qwerty-design.co.uk/
Follow me on Twitter: @QwertyDesignUK
Ricky55 is offline   Reply With Quote
Old 07-13-2014, 03:35 PM   #5
Ricky55
Ricky55's Avatar
 
Join Date: Oct 2005
Location: West Yorkshire, UK
Posts: 1,855
Default

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.
__________________
Qwerty Design

Check out my blog for web design insights.
http://www.qwerty-design.co.uk/
Follow me on Twitter: @QwertyDesignUK
Ricky55 is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:29 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com