文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML -在页面上显示标题属性

问HTML -在页面上显示标题属性
EN

Stack Overflow用户

提问于 2017-03-07 07:56:47

回答 2查看 29关注 0票数 0

下面的html运行正常，但是如何在浏览器中为每个<video>元素显示视频下面的title属性呢？

<!DOCTYPE HTML>
<html>
<head>
<title>Projekktor Version 8 Test</title>
<link rel="stylesheet" href="theme/style.css" type="text/css" media="screen" />

<script type="text/javascript" src="projekktor/jquery.min.js"></script> <!-- Load jquery -->
<script type="text/javascript" src="projekktor/projekktor.min.js"></script> <!-- load projekktor -->
</head>
<body>

    <video id="player_a" class="projekktor" poster="https://i.scdn.co/image/00d97c99f9fb5872e9a44f06ae7e20fd011de125" title="Faust Arp" width="640" height="360" controls>
        <source src="https://p.scdn.co/mp3-preview/7f8e0f1c60eaa0817e07f48d5954887ca148ef37?cid=null" /></video>
    <video id="player_a" class="projekktor" poster="https://i.scdn.co/image/0d1460c036897175f4631e8480ea4a2217bf5447" title="Daydreaming" width="640" height="360" controls>
        <source src="https://p.scdn.co/mp3-preview/fbf970f6ee1e7d849de08017d3688406107c751a?cid=null" /></video>

    <script type="text/javascript">
    $(document).ready(function() {
        projekktor('#player_a', {
        volume: 0.8,
        playerFlashMP4: 'http://www.localhost:8000/StrobeMediaPlayback.swf',
        playerFlashMP3: 'http://www.localhost:8000/StrobeMediaPlayback.swf'
        });
    });
    </script>

html

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-03-07 08:03:21

使用jQuery，您可以使用$.attr()获取title，并可以使用$.after()将其作为文本插入到视频后面

$('video').each(function() {
  $(this).after('<h2>'+$(this).attr('title')+'</h2>');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="player_a" class="projekktor" poster="https://i.scdn.co/image/00d97c99f9fb5872e9a44f06ae7e20fd011de125" title="Faust Arp" width="640" height="360" controls>
    <source src="https://p.scdn.co/mp3-preview/7f8e0f1c60eaa0817e07f48d5954887ca148ef37?cid=null" />
</video>
<video id="player_a" class="projekktor" poster="https://i.scdn.co/image/0d1460c036897175f4631e8480ea4a2217bf5447" title="Daydreaming" width="640" height="360" controls>
    <source src="https://p.scdn.co/mp3-preview/fbf970f6ee1e7d849de08017d3688406107c751a?cid=null" />
</video>

票数 0

Stack Overflow用户

发布于 2017-03-07 08:02:51

试试这个：

video:after {
   content: attr(title);
   display: block;
}

a:after {
  content: attr(title);
  display: block;
}

<a title="To show">a link</a>

小提琴使用链接，但只要启用了伪元素，它就可以与所有元素一起工作。

attr CSS "function“(缺少更好的术语)只能在伪元素的content属性中使用。

它允许您通过名称获取任何属性值。

然后，您可以使用CSS设置样式，但有一些较小的限制。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42637790

复制

相似问题

问HTML -在页面上显示标题属性
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML -在页面上显示标题属性EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML -在页面上显示标题属性
EN