Markers on video timeline

问题

Hello I'm developing a video player that shows unique words on the side inside a listbox. When a user clicks a word it has the value of that word in which second it occurs on the video.

The value for the word will be like 86.3 second. I use MediaElement.js video player.

Here is the code for the player:

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

And here is the player code:

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

I need to show a marker on the video timeline lets say on the 82 second. How is that possible?

Here is a picture of how it will look like a mark on each time the word is accorded on the timeline let's say on second 3 and on second 17 and on second 45:

回答1:

For those who has the same question. Here is one post where explain it.

'...The element can be used for any kind of interaction with the video timeline...'

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

来源：https://stackoverflow.com/questions/19890099/markers-on-video-timeline

标签

html5

html5-video