Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Incorporating data- attributes

From: Working with Data on the Web

Video: Incorporating data- attributes

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.

Incorporating data- attributes

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.

So that it could be read by JavaScript or another technology. In this project, the data attribute is inserted via jQuery and its values manipulated, so different videos can be loaded and displayed dynamically. I'm going to take you on a tour of the final code, so you can see how it's used. Let's head over to the code editor, where I have open that same file that we just looked at in the browser. So let me show you first how the HTML is set up. I'm going to scroll down to around line 66, and there's a container called videoContainer that holds a HTML5 video tag, along with three different sources.

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.

Show transcript

This video is part of

Image for Working with Data on the Web
Working with Data on the Web

25 video lessons · 10116 viewers

Joseph Lowery
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Working with Data on the Web.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.