Jump to content

image fading to video - end of video return back to original image


HappyPappy
 Share

Recommended Posts

Needing some help. Fairly new to JS.

Can someone help me figure out after my image (imgdiv3) fades to video (vid1) how to return back to image (imgdiv3) after the video is done playing? Below is my code:

 

JS

var imgdiv1;var imgdiv2;var imgdiv3;var img4;var vid1;var out;var fade = 100;window.onload = function(){imgdiv1 = document.getElementById('imgdiv1');imgdiv2 = document.getElementById('imgdiv2');imgdiv3 = document.getElementById('imgdiv3');img4 = document.getElementById('img4');vid1 = document.getElementById('vid1');out = document.getElementById('out');img4.onclick = fader;function fader(){out.innerHTML = 'fade: '+ fade;img4.onclick = null;if (fade > 0){fade = fade - 2;imgdiv1.style.opacity = fade/100;imgdiv2.style.opacity = fade/100;imgdiv3.style.opacity = fade/100;img4.style.opacity = fade/100;img4.style.filter = 'alpha(opacity=' + fade + ')';setTimeout(fader,20);} else {out.innerHTML = 'start video';setTimeout(function(){if(vid1.readyState > 0){vid1.play()}},1000);}}}

HTML

 

<div id="two">                                                         <div id="viddiv">                        <video id="vid1">                          <source src="Video/92088122.mp4" type="video/mp4">                          <source src="Video/92088122.oggtheora.ogv" type="video/ogg">                          <source src="Video/92088122.webmsd.webm" type="video/webm">                        </video>                </div>                <div id="imgdiv3">                </div>                                <div id="imgdiv2" class="typeface-js" style="font-family: StratumNo1-Regular">Lorem Ipsum                </div>                                <div id="imgdiv1">                        <div id="lang">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.                        </div>                </div>                <div id="imgdiv4">                        <img id="img4" src="PB2.png"/>                </div>                <div id="out">                </div>      </div>    

CSS

#two{   position: relative;   background-color: white;   height: 850px;   position: relative;   z-index: 7;   overflow: hidden;}#vid1{   width: 100%;   height: 870px;   min-width: 1100px;}#viddiv{   text-align: center;   margin: 0 auto;   max-width: 100%;}#imgdiv1{   position: absolute;   top: 220;   left: auto;   right: auto;   border: 1px solid transparent;   width: 100%;   height: 75px;   min-width: 900px;}#lang{   position: relative;   top: 0;   margin-left: auto;   margin-right: auto;   border: 1px solid transparent;   width: 60%;   text-align: center;   height: 75px;   font-size: 20px;   color: #83849d;   font-family: HelveticaNeue,helvetica,arial,sans-serif;   font-weight: 100;   line-height: 1.3;   text-align: center;   letter-spacing: -1px;   word-spacing: 2px;   min-width: 900px;}#imgdiv2{   position: absolute;   top: 70;   left: 0;   border: 1px solid transparent;   width: 100%;   text-align: center;   margin: 100 auto;   height: 40px;   font-family: StratumNo1-Regular,HelveticaNeue,helvetica,arial,sans-serif;   letter-spacing: -1px;   font-weight: normal;   line-height: normal;   text-align: center;   color: #3d405f;   font-size: 36px;   min-width: 1100px;}#imgdiv3{   border: 1px solid transparent;   position: absolute;   background-image: url("/Volumes/My Passport/PV/PV/Pics/Comp6.1.png");   background-repeat: no-repeat;   background-attachment: scroll;   background-position: center center;   background-size: cover;   top: 0;   left: 0;   width: 100%;   height: 800px;   min-width: 1100px;}#img3 {   margin-top: 40px;   z-index:2;}#imgdiv4{   position: absolute;   top: 0;   left: 0;   border: 1px solid transparent;   width: 100%;   text-align: center;   margin: 100 auto;   height: 730px;   min-width: 1100px;}#img4 {   margin-top: 270px;   z-index:2;  }

Sincerely,

J

Link to comment
Share on other sites

Well I guess the easiest way is to reset the source of the video on the ended event so that it returns to the beginning but it seems cheap.

Hopefully someone can help me figure this out.

 

<script type="text/javascript"> $(document).ready(function(){ $("#vid1").bind('ended', function(){ location.href="#"; }); }); </script>

Link to comment
Share on other sites

This is the webpage? http://www.dittodc.com/

 

The visuals do not work for me at all, with FF30 and my flash-blocker. All I can hear is the narrative with the screen essentially black.

 

The ended event seem to be available to do whatever you want when the video completes. I don't understand what you mean by "cheap."

 

Try...

<script>var imgdiv1;var imgdiv2;var imgdiv3;var img4;var vid1;var out;var fade = 100;window.onload = function(){imgdiv1 = document.getElementById('imgdiv1');imgdiv2 = document.getElementById('imgdiv2');imgdiv3 = document.getElementById('imgdiv3');img4 = document.getElementById('img4');vid1 = document.getElementById('vid1');out = document.getElementById('out');img4.onclick = fader;function fader(){out.innerHTML = 'fade: '+ fade;img4.onclick = null;if (fade > 0){fade = fade - 2;imgdiv1.style.opacity = fade/100;imgdiv2.style.opacity = fade/100;imgdiv3.style.opacity = fade/100;img4.style.opacity = fade/100;img4.style.filter = 'alpha(opacity=' + fade + ')';setTimeout(fader,20);}else{out.innerHTML = 'start video';setTimeout(function(){if(vid1.readyState > 0){vid1.play()}},1000);vid1.addEventListener('ended',fade_video, false);}}function fade_video(){if (fade < 100){fade = fade + 2;imgdiv1.style.opacity = fade/100;imgdiv2.style.opacity = fade/100;imgdiv3.style.opacity = fade/100;img4.style.opacity = fade/100;img4.style.filter = 'alpha(opacity=' + fade + ')';setTimeout(fade_video,20);}else{out.innerHTML = 'end of video';vid1.load();img4.onclick = fader;}}}</script>
Link to comment
Share on other sites

This is the webpage? http://www.dittodc.com/ The visuals do not work for me at all, with FF30 and my flash-blocker. All I can hear is the narrative with the screen essentially black. The ended event seem to be available to do whatever you want when the video completes. I don't understand what you mean by "cheap."

He must be saying to him the way it cut back to the image is cheap.What if you fade back to the image as the video is finishing?Or... If it's your video, have an ending scene fading to the image and then cut back to the picture.And even if it's not your video, downloaf and do so.Your the direct of this. Do what ever you wish. Edited by L8V2L
Link to comment
Share on other sites

Needing some help. Fairly new to JS.

If my suggestion help you in any manner, do you mind telling me when you started learning js, and what books have you read?
Link to comment
Share on other sites

YES... I'm sorry, I should of explained. The cut I did feels cheap because it leaves the page while "reloading".

What I want is for the video to fade back to original image as it's finishing as mentioned above. Just not sure how to do it.

 

I appreciate everyone's help... I really do. Kind of learning on my own. I just started learning HTML/ CSS back in November using CodeAcademy and finding great people on YouTube like Ralph Phillips. As far as JS is concerned, I've started since March. JS not the easiest to comprehend for me..but I'm determined to learn it. When I run into a road block, I try and figure out how they did it. Fun learning about onscroll & smooth scrolling animation, toggle, sliders, sticky navigations, paginations, etc.

 

First time I've been on a forum like this. I'm glad there's help for people like me.

J

Link to comment
Share on other sites

I see the new code has been added. Thank you so much everyone for all your help.

This looks now really professional compared to my "reloading" way of doing things.

Now I guess I'm going to have to get a really good JS book so I can be a wizard like you guys..

J

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...