视频时间轴上的标记

时间:2013-11-10 13:12:40

标签: html5 html5-video

您好我正在开发一个视频播放器,在列表框内显示唯一的单词。当用户点击某个单词时,它具有该单词的值,其中第二个单词出现在视频上。

该单词的值将为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:

image of the markers on the time line

1 个答案:

答案 0 :(得分:1)

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

&#39; ...该元素可用于与视频时间轴的任何类型的互动......&#39;

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