数据在html上具有视频属性

Question

所以，我看了一些在头版显示视频的网站，发现了这个网站。我想知道他们是如何取得如此显著的成绩的，所以我检查了包含视频的元素。令我惊讶的是，我遇到了以前从未见过的html属性。

我的问题是：如果这不是标准的html，那么它是什么？，我该如何使用它？

以下是他们正在使用的代码片段：

<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>

Answer 1

在我回答您的问题之前，有一点是data属性是自定义属性，用户可以在其中存储任何数据。这些都是在HTML5中引入的。有关更多信息，请参阅根据我的理解，查看代码链接https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes

现在回答您的问题

发生的情况是，网站使用自定义数据属性，自定义属性指定存储视频的url。当我进一步深入研究代码时，我发现他们正在使用ajax调用

Answer 2

这些都是数据属性。它们之所以有用，是因为它们是标准化的，而且允许简单的JavaScript访问：

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;

使用数据属性