こんにちは、リスト ボックス内の横にユニークな単語を表示するビデオ プレーヤーを開発しています。ユーザーが単語をクリックすると、その単語がビデオに表示される秒の値が表示されます。
単語の値は 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 秒目です。
