ビデオの下にディッププレイのタイトル

Question

私は、YouTubeのビデオのようにビデオの全長をUIに表示されるビデオの下にタイトルを表示したい。私はGoogleの多くのサイトを通過したが、それに対する答えを見つけることができません。

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<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> 
 

 
<video title="abcd" controls width="250" height="160"> ricemo 
 
    <source src="Thailand rice mill.mp4" type="video/mp4" /> 
 
    </video> 
 
<video title="asdf" controls width="250" height="160"> 
 
    <source src="China rice mill.mp4" type="video/mp4" /> 
 
    </video> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Answer 1

あなたはこの試みることができます：

<figure> 
    <video id="video_player" title="abcd" width="320" height="240" controls> 
    <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"> 
    </video> 
    <figcaption id="meta"></figcaption> 
</figure> 

<script> 
var myVideoPlayer = document.getElementById('video_player'), 
    title = myVideoPlayer.getAttribute("title"), 
    meta = document.getElementById('meta'); 

myVideoPlayer.addEventListener('loadedmetadata', function() { 
    var duration = myVideoPlayer.duration; 
    meta.innerHTML = "Duration is " + duration.toFixed(2) + " seconds and title is: " + title; 
}); 
</script> 

編集：

var date = new Date(null); 
date.setSeconds(SECONDS); // specify value for SECONDS here 
var result = date.toISOString().substr(11, 8); 

Answer 2

をお使いのブラウザが利用可能なビデオ要素とプラグインをサポートしていることを確認します。このlinkがお手伝いします。ユーチューブの動画について、あなたは私のコード下記のような埋め込みURLを使用すると、バングラビデオ歌:)

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<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> 
 

 
    
 

 
<iframe width="250" height="160" src="https://www.youtube.com/embed/KTJELAZLh2M?ecver=2"> 
 
</iframe> 
 
<figure> 
 
    <video id="video_player" title="abcd" width="250" height="160" controls> 
 
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
    </video> 
 

 
</figure> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>