您好我正在开发一个视频播放器,它在列表框内的一侧显示独特的单词。当用户单击一个词时,它具有该词在视频中出现的秒数的值。
该单词的值将类似于 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 秒: