html - 视频时间轴上的标记

Question

您好，我正在开发一个视频播放器，它可以在列表框的侧面显示独特的单词。当用户点击一个词时，它具有该词在视频中出现的秒数的值。

该词的值将类似于 86.3 秒。我使用 MediaElement.js 视频播放器。

这是播放器的代码:

 <script type="text/javascript">
    new MediaElement('Video1', {
        // shows debug errors on screen
        enablePluginDebug: false,
        // remove or reorder to change plugin priority
        plugins: ['flash', 'silverlight'],
        // specify to force MediaElement to use a particular video or audio type
        type: '',
        // path to Flash and Silverlight plugins
        pluginPath: '../myjsfiles/',
        // name of flash file
        flashName: 'flashmediaelement.swf',
        // name of silverlight file
        silverlightName: 'silverlightmediaelement.xap',
        // default if the <video width> is not specified
        defaultVideoWidth: 480,
        // default if the <video height> is not specified     
        defaultVideoHeight: 270,
        // overrides <video width>
        pluginWidth: -1,
        // overrides <video height>       
        pluginHeight: -1,
        // rate in milliseconds for Flash and Silverlight to fire the timeupdate event
        // larger number is less accurate, but less strain on plugin->JavaScript bridge
        timerRate: 250,
        // method that fires when the Flash or Silverlight object is ready
        success: function (mediaElement, domObject) {

            // add event listener
            mediaElement.addEventListener('timeupdate', function (e) {

                document.getElementById('current-time').innerHTML = mediaElement.currentTime;

            }, false);

            // call the play method
            mediaElement.play();

        },
        // fires when a problem is detected
        error: function () {

        }
    });
</script>

这是播放器代码:

<video id='Video1' width='520' height='390' controls='controls' autoplay='autoplay'>
<source src='http://localhost:83/sse-files/test.mp4' type='video/mp4'  />
<source src='http://localhost:83/sse-files/test.webm' type='video/webm'  />
<source src='http://localhost:83/sse-files/test.ogv' type='video/ogg'  />
</video>

我需要在视频时间轴上显示一个标记，比如说第 82 秒。这怎么可能？

这是一张图片，显示每次时间轴上的单词看起来像一个标记，比如第 3 秒、第 17 秒和第 45 秒:

Answer 1

对于那些有同样问题的人。这是一篇对其进行解释的帖子。

“...该元素可用于与视频时间轴进行任何类型的交互...”

https://hacks.mozilla.org/2014/08/building-interactive-html5-videos/