Titel des Videoelements kann in der Benutzeroberfläche nicht angezeigt werden

Ich lerne Webanwendung Entwicklung mit HTML, CSS und JS. Currently versuche ich, alle auf der UI gespeicherten Videos anzuzeigen, ich bleibe bei der Anzeige der Namen des Videos unter ihnen. Derzeit kann ich den Titel des Videoelements nur für ein Video anzeigen, aber wenn ich weitere Videos hinzufügen, kann ich den Titel unter ihnen nicht anzeigen, unten ist der Code, an dem ich arbeite. Kannst du mir bitte helfen, mich zu erreichen den Titel im Videoelement angezeigt werden auf allen VideosTitel des Videoelements kann in der Benutzeroberfläche nicht angezeigt werden

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

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

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 ; 
});

edit:

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)); 
}

Quelle

2017-06-27 Hara

Woher rufen Sie den Eventlistener ('loadedmetadata')?

Hinzufügen von etwas wie dieser Code macht es funktioniert.

function loadedmetadata(){ meta.innerHTML = title ; } loadedmetadata();

Überprüfen Sie Ihre Funktion loadedmetadata, ich denke, es wird nicht aufgerufen.

Auch das ist falsch.

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

Dies wird nur den ersten Wert annehmen. Sie müssen eine Funktion erstellen, die die ID-Liste durchläuft.

Quelle

2017-06-27 10:16:50 Etherealm

Funktion loadedmetadata() {meta.innerHTML = title; } loadedmetadata(); – Hara

Ich erstelle Schleife wie in Bearbeitung ist es in Ordnung? – Hara

Titel des Videoelements kann in der Benutzeroberfläche nicht angezeigt werden

Antwort

Verwandte Themen