2013-11-10 3 views
2

Привет, Я разрабатываю видеопроигрыватель, который показывает уникальные слова сбоку внутри списка. Когда пользователь нажимает на слово, он имеет значение этого слова, в котором он появляется на видео.Маркеры на временной шкале видео

Значение слова будет равно 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

ответ

Смежные вопросы