Question

我想在用户界面中显示的视频下方显示视频的总长度，就像在YouTube视频中一样。我已经浏览了谷歌的许多网站，但无法找到答案。

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可能会对您有所帮助。对于youtube视频，您需要使用类似于我的代码下方的嵌入式网址并欣赏一首bangla视频歌曲：）

＆＃13;

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

＆＃13;

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

＆＃13;

视频下方的Dipsplay标题

2 个答案: