在按钮单击时跳转(搜索)到videojs中的标记

时间:2016-09-15 18:29:07

标签: reactjs video.js

我已将标记添加到我的videojs播放器中。每次点击特定按钮(比如下一个按钮)时,我想跳到每个标记的开始时间。我该怎么做我知道我必须改变当前时间,但我没有得到如何解决完整的问题。我有每个标记的开始时间。任何形式的输入都会有所帮助。 Player

Player.js

'DB value' => 'insert into CSV'
         0 => 'N/A',
         1 => 'foo',
         2 => 'bar'

Marker.js

import assign from 'object-assign'
import cx from 'classnames'
import blacklist from 'blacklist'
import React from 'react'

module.exports = React.createClass({
  displayName: 'VideoJS',

  componentDidMount() {
    var self = this;
      var player = videojs(this.refs.video, this.props.options).ready(function() {
          self.player = this;
          self.player.on('play', self.handlePlay);
      });

      if(this.props.onPlayerInit) this.props.onPlayerInit(player);

      player.markers({
          markerStyle: {},
          markers: [
              { startTime:10, endTime:15, time: 9.5, text: "compliance"},
              { startTime:20, endTime:25, time: 16,  text: "compliance"},
              { startTime:30, endTime:38, time: 23.6,text: "compliance"},
              { startTime:51, endTime:55, time: 28,  text: "compliance"}
          ]
      });


  },


  handlePlay: function() {
    if(this.props.onPlay) {
        this.props.onPlay(this.player);
    }
  },

  render() {
    var props = blacklist(this.props, 'children', 'className', 'src', 'type', 'onPlay');
    props.className = cx(this.props.className, 'videojs', 'video-js vjs-default-skin', 'vjs-big-play-centered');

    assign(props, {
      ref: 'video',
      controls: true
    });

    return (
      <div>
        <video {... props}>
          <source src={this.props.src} type={this.props.type}/>
        </video>
      </div>
    )
  }
});

0 个答案:

没有答案