如何在html5 js中动态显示视频时间戳答案

【问题标题】：How to dynamically display the video timestamp in html5 js如何在html5 js中动态显示视频时间戳
【发布时间】：2019-06-26 05:03:00
【问题描述】：

我有这个读取视频文件并在浏览器中播放的 html 代码。我希望动态显示视频时间戳，但浏览器中没有显示任何内容。

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

【问题讨论】：

标签： javascript html video-streaming html5-video

【解决方案1】：

只需在</video>之后添加即可解决

<p>TimeStamp: <span id="demo"></span></p>
<script>
// Get the audio element with id="my_video_1"
var aud = document.getElementById("my_video_1");

// Assign an ontimeupdate event to the audio element, and execute a function if the current playback position has changed
aud.ontimeupdate = function() {myFunction()};

function myFunction() {
  // Display the current position of the audio in a p element with id="demo"
  document.getElementById("demo").innerHTML = aud.currentTime;
}
</script>

【讨论】：

【解决方案2】：

你应该使用事件'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);

【讨论】：