Create an Awesome Scroll-based HTML5 Video Explainer

hey everyone Gary Simon of poor cetera with yet another video at 10:30 a.m. Eastern Time as is always the case of Monday through Thursday so today I'm going to show you how to do something really cool right here is my fist by the way and this is a video that are recorded with a green screen behind it I'm actually going to show you real quickly a little bit after this my spiel here how I recorded it and such you get to see myself in a lovely dirty ass tank top but basically I just recorded my arm doing a one two three four and we're gonna use HTML CSS and JavaScript to kind of create and follow along I guess you could say explainer that goes through points you know one two three four like this so I'm gonna use my mouse scroll will actually let me refresh so we can have the animations to these anime in as well step one and this is HTML right there so I'm using my my mouse scroll wheel to go down and I'm controlling the video playback based on the scroll position so I have four steps and that's it and I can go back up and blah blah blah blah blah blah yeah so let me just show you on the actual monitor too so if i refresh we have some animation occurring I'm just gonna drag down step one step two step three and step four alright guys so hopefully you enjoy this one today's question is do you actively game on the PC and I asked this because I used to be a massive gamer um you know from my early teens all the way into my late twenties and then for some reason I don't maybe having kids or something I just lost interest in gaming and I think a lot of designers developers you know whatever they're gamers but I don't know I mean I'm gonna be 35 next week I don't know if it's just a matter of getting older or just games sucking more I don't know a huge FPS fan are you a gamer and do you have any games that you think I might be interested in that might be a bad question though because I really shouldn't waste any time I'm so busy on this damn Channel anyhow let me know in the comments and make sure you subscribe if you have it and let's get started [Music] basically I imported the footage and then the footage is right here this layer down here is a just a background a solid background color you could make that anything that's this light blue right here and then the footage this is what I you know exported from directly from my camera and I simply rotated it and kind of got it in an orientation that I liked and then I applied I let's see here the ultra key just to key at the green so I'm going to enable that it worked out pretty nicely um and then I applied a these coloring adjustments right here it just slightly brightened things up and then I added a drop shadow for the hell of it like that so all in all this is what it looks like and that's it alright so the idea is we're gonna sync up some other information on the screen based on these you know one two three four happening all right so then all I did is just export it as an mp4 for safe measure if you were to use this in production you would want to export it in other html5 video formats such as WebM there are plugins that are free for premiere at least that will let you export in WebM in OGG I believe Orbis I think it's called but anyhow yeah that's it what I'm going to do though is make the the video here that I'm exporting and then I'm featuring that then I'm gonna do actually use in the HTML gonna make that available here in the description and I'll probably have it and as a file or something like that with the project okay alright so that's how I did that so now we're at the page or the stage where you know you have your video let's get started how do we actually do this alright so I have a brand new empty folder here opened with a Visual Studio code freed code at a free code editor Jesus Christ talk from Microsoft I feel like a broken record because I'm recording four videos weekly and I say the same thing every time but you know I have to because there's new people watching this so I understand if I'm a little bit repetitive for those of you who watch frequently a main dot CSS right here exclamation point hit enter and give us our boilerplate HTML feels like around Groundhog Day here I'm gonna type in link to link up our main H or in main CSS file rather alright okay so let's just get all the HTML out of the way first first and foremost so each of the sections of the steps like first one says scroll to begin next one will be step one two three and four we're going to contain all those in section elements alright and we'll just have class equals container although I don't think I need to add the class but I did it beforehand anyhow and then we're gonna have a div class of content so the section class right here we're gonna make it long like we're gonna set a height individually for each one of them so that it syncs up well with you know the one two three four going on high and so and then the content class in here is just gonna hold our h1 and that's going to scroll to begin that's going to say rather and then underneath there we're gonna have our paragraph element or started like this okay I don't know you know what that means whatever but the content in here we're gonna use a script called sticky Jas and it's going to make this stick I to the top of the content or the section container right here so you'll see how it works really cool I covered it last week actually and so now we can just take this I'm going to replicate it four more times alright so this is the one that says to begin then we have our four down here let me hit ctrl B to get rid of that sidebar so two three four all right and then real quickly we're just gonna put step one I'm not gonna bother even changing the the paragraphs right now that's a little bit too much waiting around and step four awesome okay so now we can go beneath this and set up the video section and all that stuff that's required there so the the video section first we're gonna have and this is going to be referenced in JavaScript div ID of set height and by the way I'm never gonna take credit for a code that I found and used for a tutorial so with that said this here some of you may have seen this this was kind of popular it was rule this is what happened was Apple did this the same exact technique that I'm doing like three years ago and one of their product landing pages or something where it had this scroll effect where it just goes through the video the exact same thing we're doing here and this is like a Google version or something like that what I did for the JavaScript that's coming up in the general set up that's coming up I found this github and I basically use this as a boilerplate so we're gonna be using the same JavaScript over here essentially to to get the video portion of what we're trying to do of course I extended it with you know the the this content up here but yeah just want to definitely mention that I'm not going to take credit for that crap alright so then yeah this div id of set height this is tart this will be targeted you'll see momentarily in JavaScript so next is a video ID and again this is coming straight from the pug code over here this is this weird HTML stuff it doesn't look like normally HTML CSS pug right there pug used to be known as Jade and it's an HTML template again CH and it's a different way to write HTML but it this is the same general concept you can see the video the ID equals v-0 tabindex etc etc so we're just going to be using that same stuff right here alright so um let's see our tab index equals zero and then auto buffer and then preload all right and then inside here goes all of our different source elements for each source or video source that we have I think of them kind of like fall backs I guess you could say for browsers that don't support it we're just gonna use one it's gonna be the mp4 one again you would want to add WebM as well so each one has its own Associated codec the file type so I'm just gonna copy and paste this one off-screen and this you can see the source type is an mp4 the codecs I grabbed this here from a Google result about html5 video players and the source types and then we have a source here called fingers you know 1 2 3 4 dot mp4 that I've included in a project files for you guys and that's gonna be the one that I'm going to use alright and then um that's pretty much it yeah that's all it is for the HTML now for the JavaScript to get this actually working all right so our JavaScript let's work on the video stuff first and then we'll work on this sticky stuff after that and that sounds messed up so of our frame you know what I'm not gonna stay here and just type that we can get this right here because it's all pretty much the same exact thing so just take all of the JavaScript right here from this code pen I'll try to remember to link it hopefully I will and then if not you can just pause the video get that URL yourself it wasn't too bad and then we're gonna paste it right in between the script tags now the one thing that I am going to change about this oops is the frame number yeah we're leaving that there as a start the video at frames you the playback Const the constant to the lower numbers means that it'll be a faster playback and the higher numbers will be slower I decided to use a thousand so you can just experiment with that and then as you can see we have our get element by ID set height this sets the height eventually here based on the duration of the video so the height of this div is what adds the squirrel bars all right so the scroll bar is pretty much dynamic and it's based on the length of the video that you've included all right so that's just something to think about so that's basically yet right there let's save this and at this point let's go ahead and I'm gonna hit control B and I'm gonna right click open with live server all right and it's not playing because I forgot to put that that a video file in there so I'm going to open up that my folder here real quickly hang with me all right and let's see if I get the right one yeah there we go so I'm just gonna put it right in the root here so I'm gonna reveal this here all right now let's see if that updated no it did not let me hit properties I want to make sure I have the right file type here yeah it's an mp4 now all you definitely gonna have to set some CSS first so I'm getting ahead of myself just a little bit so I'm gonna go back to my main that CSS file let's see here we're going to have a body element and we're gonna say a background color is that light blue color that I had in the video itself so it's gonna match up the background of the document so it looks seamless essentially all right and then font family as always montserrat it's installed on my machine you can get it it's free it's a Google web font and then our v-0 for video zero I assume that stands for we want to make sure that's position fixed so that it doesn't scroll away with the rest of the content so we fixed that we're gonna say bottom zero cuz we want to go to the bottom the way my video is set up with my arm and such and also write zero so it's it's it's gonna be organized to the bottom right I could I was thinking about making it a smaller than 100% so I guess it doesn't even matter if you make it a hundred percent where it's structured at but let's see if it's showing up yet hey hi there we go so now it's working and this is blown up there we go alright and we don't see the other content yet because we need to add some CSS okay so now I we're going to do this set height thing and this is again from that code pen they have a display block on this it was already working I'm not sure if exactly that was necessary anyhow and then our section we're gonna say Z index 1 and position:relative Z index 1 make it sit on top of our content and there it is now however you can see it goes away don't worry we're uh we're gonna get there alright so section next is our content which is really the same thing I at least I thought it was let me see here no it's not it's it's own do I was thinking that was a container alright and then we're gonna put in content and position sticky but you probably must be up and seen that one yet like there's a WebKit vendor prefix sticky and then width is a hundred percent and top is thirty three point three percent all right so let's check that out okay nothing changed it it's our content make sure my classes are aligned up well one second will keep on going because I I believe the issue was is a yeah the height of the section hasn't been set yet so then we're just going to reference I real quickly our h1 in our paragraph element font size 3m and a background it's gonna be white display:inline-block what am i doing is that that looked like I was not spelling it right but I was already recorded in a video earlier today I'm tired man I think it's showing border-radius is going to be five pixels and margin:0 alright we're getting there we're getting there an inch simply paragraph we're just gonna say font size 1.5 am to make it larger all right so now let's set the height of each one of these now the height of each one of these needs to kind of align with this hand and the fingers like when the step one shows up should only be one and it's showing up and and so on so on and so forth so the way we're going to do that you know cuz these are all just section there's five of them the five of these sections I'm not giving them IDs we can just use the pseudo class end of type so section n of type one so the very first one will say a high of 600 pixels I believe that worked well okay now we have to keep on doing the other four and the way I got to these values these height values is simply through trial and error I mean yeah there's no way to know this stuff offhand or automatically the next one I found that a little bit more time a lap so I put 1200 make sure we put two three four and five by the way the third one was also 1200 probably combine these two and then a thousand then I just put 4000 on this one so it lasts a long time hopefully it's gonna work the same way we'll see though all right there it looks like it's almost working how we want it to this scroll to begin part in this step one and that that's not correct not at all what is happening here well control shift I whenever you're in doubt and you're trying to figure something out this here I guess I the height is just not enough let me make sure I add any other rule sets in case you know that is one of the factors and I don't think it is though so I'm gonna have to adjust this you know this looks like it might have to be like 1200 which me mess up my other values by the way next actually pretty good right there awesome and now we can of course also use some clever animation to apply to these when they come into view so this is something I covered on another sticky tutorial sticky CSS tutorial from last week so what we can do is go to that anomie I've been using this a lot really like it this animist dotnet web-based animator and animation generator so if we go up here and we choose text and we choose focus in I use this one so we come over here and we copy this and then we put it in we attach it to our a new class called entered and will reference this in JavaScript shortly all right we paste it in there and then we copy the keyframes from that same page copy keyframes paste it alright now we save and go back to our index and we need another script called sticky j/s let me do a quick search for that alright sticky j s plugin here it is you can find it you can find I click on the github page and the sticky J s is somewhere in there to be found and then I think that's the same one I hope I hope it's the same one it might not be either way I'm going to provide the files here anyhow I'm gonna open up in my other project here and just paste that sticky J s kind of just clumping all the files together it's not a serious project though so I don't I'm not really worried too much about that and then we're going to reference our sticky j s we're gonna include it right up here alright and then all we have to do is put just at the top here we call it by calling interview then we say the selector it's going to be section so when a section one of these section elements enters the view then what all right well let's see when on enter we have function and we put in a l dot class list we're gonna add a class to our section anytime it's entered in the class that we're gonna add is called entered that's it alright so make sure your your CSS with the new animation and the index are saved and I will go back here refresh we got our custom blur thing going awesome and there we go make this a little larger refresh to start Neil go back up at the top here it looks like I'm a little bit off I think because I had this reset I have this zoomed up a little bit let me reset that because if you zoom it looks like it may be throwing it off yeah they're a little bit delayed but not enough for me to really worry we just have to work on those those values a little bit more awesome anyhow that is it and if you by the way and I mention this if you want this to be a little bit higher resolution you can definitely increase the quality when you're exporting your video by a little bit this is actually only let me look at the the file size of this reveal and Explorer it's I it's 870 mayera phenomics that would be horrible kilobytes so it's less than a Meg so yeah that's the only way you're gonna get around that or instead of making a hundred percent you could make the quality look a little bit better by making it by shrinking it in your CSS for instance if I go back up to where is it at right here and I change this maybe to seventy let's see what happens so now it doesn't look so blurred because we don't have it zoomed up so high but of course it does it it would adjust and make you you know adjust your design because this is no longer it doesn't look correct because this is so far over there but either way that's just some thoughts that I had regarding this awesome stuff alright guys so hopefully you enjoyed that like I said today's question is are you a gamer and are there any games that you actively play that perhaps you want to recommend to my subscribers and even myself although I should not game alright so I'll see you guys possibly I'm planning on it yeah I know typically I do a Monday through Thursday schedule tomorrow's Friday last Friday I actually did do a livestream at 10:30 a.m. where I did a review of all of your guys's questions throughout those previous four days and I also did a live portfolio review so that's something I may do again tomorrow as well but I can't promise it tonight is actually technically July 4th and as fireworks I'm gonna be drinking alcohol so we'll see how I feel tomorrow all right [Music]

Channel: DesignCourse

Views: 59,876

Keywords: html5 video, html5, html5 video player, html video player, html embed video, scroll, html5 video scroll, html5 scrolling video, control video by scroll, page scroll, tutorial, video javascript, javascript video, control video js, html video player custom, explainer video

Id: HiegEfkenXA

Length: 25min 12sec (1512 seconds)

Published: Thu Jul 05 2018