CODEWITHSUNDEEP
htmlvideoattributes
Edd
Edd

Reputation: 1988

Data-has-video attribute on html

So, I was taking a look at some websites that display video on their front page, and I came across this website. I wanted to know how they had accomplished such a remarkable result, so I inspected the element that contained the video. To my surprise, I encountered html attributes I had never seen before.

My question is: If this is not standard html, then what is it?, and how can I use it?

Here is a snippet of the code they are using:

<div class="frontpage-head-wrapper" data-has-video="1" data-video-mp4="http://d27shkkua6xyjc.cloudfront.net/videos/maaemo-film-2.mp4?mtime=20141113185431" data-video-ogv="http://d27shkkua6xyjc.cloudfront.net/videos/maaemo-film-2.ogv?mtime=20141113185421">

</div>

Upvotes: 2

Views: 2475

Answers (2)

Muhammad Ammar
Muhammad Ammar

Reputation: 38

A point before I answer your question is that the data attributes are custom attributes in which user can store any data. These were introduced in HTML5. For more information please refer to this From what I understand looking at the code link https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes

Now to your question

what happens is that the website is using custom data attributes and the custom attributes specifies the url where the video is stored. And when I dug further in the code, I found that they are displaying video using ajax calls

Upvotes: 1

user4427511
user4427511

Reputation:

Those are data attributes. They are useful because they are standardized, and allow easy JavaScript access:

ch = document.querySelector('div').dataset;

// 1
ch.hasVideo;

// http://d27shkkua6xyjc.cloudfront.net/videos/maaemo-film-2.mp4?mtime=20141113185431
ch.videoMp4;

// http://d27shkkua6xyjc.cloudfront.net/videos/maaemo-film-2.ogv?mtime=20141113185421
ch.videoOgv;

Using data attributes

Upvotes: 0

Related Questions