Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
I'm a really big fan of customization in code, and pretty much everything else. But I recognize the value of standards as well. And that's why I think the data attribute is a really big deal, because I can have both. In this lesson I'm going to show you how I use the data attribute in an HTML 5 project for incorporating video bumpers. Short videos that play on either side of the main video. Let me give you a demo of how that works. So I have open the index.htm file from the chapter six 0603 folder and I'm going to scroll down to the video area here.
And, I'll just go ahead and click Play. >> It's happening all over the world. Every day people are harnessing the power of the sun and it's literally lighting up their lives. (MUSIC). >> That's the end of video bumper. >> To see the faces of our customers when we first turn on the solar system and watched the meter go backwards.
It is such a happy moment and makes me very proud. >> And this is the main video. Lemme go ahead and scrub towards the end here. >> Some/g. >> Solar energy is awesome. Lower your energy costs and help create a cleaner, healthier planet for generations to come. Connect to the sun and power up. And that's the bumper out. Pretty seamless, eh? In the intro to this chapter, I gave a couple of examples showing the data attribute, already inserted into the code.
I'll need all three to cover the range of modern browsers. That's the HTML. Let's scroll down to where our script starts, which I think is down around line 92. After some initialization in lines 93 and 94, the very first four loop goes through each of the video sources and does three things. First, it gets the current source attribute and stores it in the variable called orig, short for original. Second, and this is key, it creates a new attribute called data-orig with the value that was just stored.
Finally, it replaces the source attribute with the bumper in source. We store this data-orig value in order to use it later and replace it. I need to scroll down just a little bit more, so that we can see the next group of code. Now the data-orig attribute is used again, in the routine that is used on line 104. This code chunk waits for whatever video is playing to end, then acts accordingly. Again, it loops through the sources and straightaway gets the data orig value.
Now if there is a value in the data orig attribute, it means that the first video bumper has just ended and we're ready to play the main video. So the source is adjusted. You see that in this section here. If there isn't a data orig value, it's because the main video has just finished. And we're either ready for the bumper out, which is handled here, or we've just paused. And that's how the data attribute is used in this particular project.
Now let's go back and demo the video one more time with the coders commentary track turned on if you will. I'll hit Refresh, and click Play. >> It's happening all over the world. >> Okay, so we just loaded the page and our data orig attribute has been created. I'm going to go ahead and jump to the end of the first bumper, which as you can see is about 22 seconds long. Now when I press Play, the bumper in will reach the end. >> To see the faces of our customers.
>> And the data orig value has been swapped,so the main video is now playing. So let's scrub to the end of the main video, which is substantially longer, but we've gotta get the cute kids in here. >> Solar power is awesome. >> Solar energy is awesome. >> That's correct , it is. And what's even more awesome is our data-orig value, which made it possible to swap the values in and out.
So that we could seamlessly present a bumper in, a main video clip, and a bumper out. Of course, this is a very specialized use of the data attribute, but that's kind of the point. All uses of the data attribute are specialized, so they can do exactly what you need and still stay valid HTML5 code. If you'd like to see how the video bumpers are integrated from top to bottom, take a look at my lynda.com course HTML5 Projects Video Bumpers.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101147 Viewers
61 Video lessons · 87908 Viewers
71 Video lessons · 71786 Viewers
56 Video lessons · 103658 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.