Как динамически отображать метку времени видео в формате html5 js - PullRequest
Новая
       49

Как динамически отображать метку времени видео в формате html5 js

0 голосов
/ 26 июня 2019

Ive этот 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>

1 Ответ

0 голосов
/ 26 июня 2019

Решается простым добавлением этого после </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>
...