UIのビデオ要素のタイトルを表示できません

HTML、CSS、JSを使用したWebアプリケーション開発を学習しています。 Curretly私はUIに格納されているすべてのビデオを表示しようとしていますが、私はそれらの下のビデオの名前を表示するには固執しています。現在、私は1つのビデオだけのビデオ要素のタイトルを表示することができますが、私はそれらの下のタイトルをdispalyすることができないより多くのビデオを追加する場合は、私が作業しているコードは、下にありますUIのビデオ要素のタイトルを表示できません

header { 
    background: green; 
    color: white; 
    padding: 8px 0px 6px 40px; 
    height: 50px; 
} 

header h1 { 
font-size: 30px; 
float: left; 
margin-top: 0px; 
margin-right: 50px; 
} 

nav ul{ 

padding: 0px; 
float: left; 
} 

nav ul li{ 
display: inline-block; 
list-style-type:none; 
color: white; 
float: left; 
margin-left: 15px; 
} 

nav ul li a{ 
color: white; 
text-decoration: none; 
} 

#nav { 
font-family: 'Montserrat', sans-serif; 
} 


.divider{ 
background-color: red; 
height: 5px; 

} 


figure { 
    display: inline-block;  
} 
figure video { 
    vertical-align: top; 
} 
figure figcaption {  
    text-align: center; 
}

JSコード：

var myVideoPlayer = document.getElementById('video_player' , 'video_player1' , 'video_player2'),  
    title = myVideoPlayer.getAttribute("title"),  
    meta = document.getElementById('meta' , 'meta1' , 'meta2'); 

myVideoPlayer.addEventListener('loadedmetadata', function() { 
    meta.innerHTML = title ; 
});

編集：

すべての動画

<!DOCTYPE HTML> 
<html lang = "en"> 
    <head> 
    <title>Videos</title> 
     <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" href="videos.css"> 
    </head> 

<body> 
    <header> 
    <h1> Main logo </h1> 
    <nav> 
    <ul id="nav"> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="videos.html">Videos</a></li> 
</ul> 
</nav> 
</header> 
<div class="divider"></div> 


<figure> 
    <video id="video_player" title="movie1" width="300" height="240" controls> 
    <source src="1.mp4" type="video/mp4"> 
    </video> 
    <figcaption id="meta"></figcaption> 
</figure> 

<figure> 
<video id="video_player1" title="movie2" controls width="300" height="240" controls> 
<source src="2.mp4" type="video/mp4" /> 
</video> 
    <figcaption id="meta1"></figcaption> 
</figure> 

<figure> 
<video id="video_player3" title="movie3" controls width="300" height="240" controls> 
<source src="3.mp4" type="video/mp4" /> 
</video> 
    <figcaption id="meta2"></figcaption> 
</figure> 


    <!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

<script src="videos.js"></script> 

</body> 
</html>

CSSコードにvideo要素にタイトルを表示します

var meta = document.getElementById("meta"); 
var metaa = nums.getElementsByTagName("figcaption"); 

var newNums = []; 

for (var i=0; i < metaa.length; i++) { 
    newNums.push(parseInt(metaa[i].innerHTML, 10)); 
}

出典

2017-06-27 Hara

あなたはどこからeventlistener（ 'loadedmetadata'）を呼び出していますか？

このコードのように追加すると機能します。

機能の負荷メタデータを確認してください。私はそれが呼び出されていないと思います。

これも間違っています。

meta = document.getElementById('meta' , 'meta1' , 'meta2');

これは最初の値になります。 idリストをループする関数を作成する必要があります。

出典

2017-06-27 10:16:50 Etherealm

function loadedmetadata（）{meta.innerHTML = title; } loadedmetadata（）; – Hara

私は編集のようなループを作成していますそれは大丈夫ですか？ – Hara

UIのビデオ要素のタイトルを表示できません

答えて

関連する問題