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