如何在html5 js中动态显示视频时间戳 [英] How to dynamically display the video timestamp in html5 js
本文介绍了如何在html5 js中动态显示视频时间戳的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
提供此html代码，该代码可读取视频文件并在浏览器中播放.我希望视频时间戳能够动态显示，但是浏览器中什么也没显示.
Ive this html code which reads a video file and plays it in browser. I want the video timestamp to be displayed dynamically but nothing is getting displayed in the browser.
<title>VIDEO PLAY</title>
<script src="http://vjs.zencdn.net/4.6.1/video.js"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"/>
<body>
<h1>VIDEO PLAY</h1>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
data-setup='{ "playbackRates": [0.5, 1, 1.5, 2, 4] }'>
<source src="movie.m4v" type='video/mp4' />
<track src='br.srt' kind="subtitles" srclang="en" label="English" default />
</video>
<script type="text/javascript">
var vid = document.getElementById("my_video_1");
var curTime=vid.currentTime;
</script>
<h1>
the value for number is:
<script type="text/javascript">
document.write(curTime)
</script>
</h1>
</body>
推荐答案
您应使用事件'dateupdate':
You should use the event 'dateupdate':
function formatTime (time) {
let t = parseInt(time);
return parseInt(t/60) + ':' + (t%60 < 10 ? '0' + t%60 : t%60);
}
function setCurrentTime () {
let currentTime = getElementsByClassName('current-time')[0];
currentTime.innerHTML = formatTime(video.currentTime);
}
EventUtil.addHandler(video, 'timeupdate', getCurrentTime);
这篇关于如何在html5 js中动态显示视频时间戳的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
