Javascript 视频下方的显示标题

我想在UI中显示的视频下面显示标题，以及视频的总长度，就像YouTube视频一样。我在谷歌上浏览过很多网站，但都找不到答案

标题{
背景：绿色；
颜色：白色；
填充：8px 0px 6px 40px；
高度：50px；
}
收割台h1{
字体大小：30px；
浮动：左；
边际上限：0px；
右边距：50px；
}
导航ul{
填充：0px；
浮动：左；
}
李国荣{
显示：内联块；
列表样式类型：无；
颜色：白色；
浮动：左；
左边距：15px；
}
海军ulli a{
颜色：白色；
文字装饰：无；
}
#导航{
字体系列：“蒙特塞拉特”，无衬线；
}
.分隔器{
背景色：红色；
高度：5px；
}

主标志




里切莫

您可以尝试以下方法：

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

---

确保您的浏览器支持视频元素和可用插件。这可能对你有帮助。对于youtube视频，您需要使用嵌入url，如下面的“我的代码”并欣赏一首孟加拉视频歌曲：）

标题{
背景：绿色；
颜色：白色；
填充：8px 0px 6px 40px；
高度：50px；
}
收割台h1{
字体大小：30px；
浮动：左；
边际上限：0px；
右边距：50px；
}
导航ul{
填充：0px；
浮动：左；
}
李国荣{
显示：内联块；
列表样式类型：无；
颜色：白色；
浮动：左；
左边距：15px；
}
海军ulli a{
颜色：白色；
文字装饰：无；
}
#导航{
字体系列：“蒙特塞拉特”，无衬线；
}
.分隔器{
背景色：红色；
高度：5px；
}

主标志

谢谢，它正在工作，如果我的文件夹中有3个视频，并且希望在下面显示相同名称和长度的视频，以便进行所有更改，欢迎使用。您有两种选择：要么硬编码所有内容，要么将其放入循环中。如果这个答案对你有帮助，请选择它作为你的问题。我将尝试进行循环，如果有任何疑问，我将返回给你，还有一件事如何将持续时间从秒转换为分钟。你可以使用date函数将时间格式化为任何形式，请检查我的编辑。更正，我试图通过在中心只提供标题来循环，我能得到的标题只有一个而不是其他视频，你能告诉我如何纠正它。请检查我的编辑。

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