Question

以下html工作正常，但如何在视频下方的浏览器上为每个title元素显示<video>属性？

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

Answer 1

试试这个：

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

＆＃13;

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

＆＃13;

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

＆＃13;

小提琴使用链接，但只要启用伪元素，它就应该适用于所有元素。

attr CSS＆＃34;功能＆＃34; （缺少更好的术语）只能用于伪元素的content属性。

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

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

Answer 2

使用jQuery，您可以使用title获取$.attr()，然后您可以使用$.after()

将其作为文字插入视频

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: