HTML - 顯示標題屬性第

html下面的工作正常，但是如何在視頻下方的瀏覽器上爲每個<video>元素顯示title屬性？HTML - 顯示標題屬性第

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

來源

2017-03-06 data_garden

如果將鼠標懸停在視頻的標題文字顯示作爲一個工具提示。我假設你不是在問什麼。你想在哪裏展示它們？瀏覽器上的 –

。 –

@MichaelCoker在視頻下方。 –

使用jQuery，你可以得到title使用$.attr()，你可以插入的視頻後的文本使用$.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>

來源

2017-03-07 00:03:21

不錯。您能否使用'''的全部內容擴展您的答案？ –

@data_garden你能更具體嗎？我不想包含你的'projekktor'代碼，如果這就是你所指的，因爲它與這個答案無關。只有最少數量的代碼才能重現問題或提供問題的解決方案，無論是您的還是我的迴應。 –

@data_garden您是否贊成Exalyon的回答？ –

-1

試試這個：

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

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

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

小提琴使用鏈接，但它應該與所有元素，只要僞元素啓用工作。

attr CSS「功能」（缺少更好的術語）只能用於僞元素的內容屬性。

它允許您通過名稱獲取任何屬性值。

然後，您可以使用CSS進行樣式設置，但只有很小的限制。

來源

2017-03-07 00:02:50 Exalyon

HTML - 顯示標題屬性第

回答

相關問題