因此,我制作了一个脚本来在播放器外部显示当前时间,并且一切正常。问题是它以微秒为单位渲染,我想将其显示为H:MM:SS
这是代码,因此您可以了解我在说什么:
HTML
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<video id="MY_VIDEO_1" class="video-js vjs-default-skin" autoplay controls preload="auto" width="800" height="450" data-setup="{}">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
<source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
Current time: <div id="current_time"></div>
JavaScript
setInterval(function() {
var myPlayer = videojs('MY_VIDEO_1');
var whereYouAt = myPlayer.currentTime();
document.getElementById("current_time").innerHTML = whereYouAt;
}, 400);
还有一个工作示例:http://codepen.io/BeBeINC/pen/VLBPLz
最佳答案
currentTime
以秒为单位返回时间,两位小数。如果要将其转换为minutes:seconds
格式,则需要在script中执行以下操作:
var minutes = Math.floor(whereYouAt / 60);
var seconds = Math.floor(whereYouAt - minutes * 60)
这将使时间格式为0:0,这不是很明显。它的格式应为
00:00
。因此,我们需要添加一个前导零:var x = minutes < 10 ? "0" + minutes : minutes;
var y = seconds < 10 ? "0" + seconds : seconds;
然后显示
x
和y
。document.getElementById("current_time").innerHTML = x + ":" + y;
最终脚本:
setInterval(function() {
var myPlayer = videojs('MY_VIDEO_1');
var whereYouAt = myPlayer.currentTime();
var minutes = Math.floor(whereYouAt / 60);
var seconds = Math.floor(whereYouAt - minutes * 60)
var x = minutes < 10 ? "0" + minutes : minutes;
var y = seconds < 10 ? "0" + seconds : seconds;
document.getElementById("current_time").innerHTML = x + ":" + y;
}, 400);
这是更新的codepen