4

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

该单词的值将类似于 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 秒:

时间线上的标记图像

4

1 回答 1

4

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

'...该元素可用于与视频时间线的任何类型的交互...'

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

于 2016-08-24T15:54:25.217 回答