Question

我有一个字幕文件，结构如下：

{ id: '54',
    startTime: '00:03:46,572',
    endTime: '00:03:53,160',
    text: 'Hello this is a text' 
 },
 { id: '55',
    startTime: '00:03:53,160',
    endTime: '00:03:58,799',
    text: 'To be precise, the subtitle file of a movie' 
 },

我现在想要浏览此文件，并在播放视频中达到相应时间时显示字幕。我大致知道如何在javascript中实现这样的东西，但我想知道如何使用React＆amp;终极版。

我可以以某种方式节省在我的状态下播放视频的时间，然后，每次更改时，都会相应地对我的字幕作出反应吗？或者你会建议什么？我非常欢迎一些代码/示例。

Answer 1

这个问题感觉太笼统了。

我接下来会解决这个问题。希望它能给你一个大致的想法。

我认为字幕是一个对象数组，而id对应于数组索引。

const initialState = {
  activeSubtitleId: 0,
  // Here are your subtitles
  subtitles: [],
}

然后设置一个听取一个动作的缩减器

export const videoReducer = (state = initialState, action) => {
  switch(action.type) {
    case SYNC_SUBTITLES: {
      const { videoTime } = action.payload

      const activeSubtitleId = state.subtitles
        .filter(subtitle => subtitle.startTime >= videoTime && subtitle.endTime <= videoTime)[0].id

      return { ...state, activeSubtitleId }
    }
  }
}

export default videoReducer

最后丢失的部分是动作SYNC_SUBTITLES

export const SYNC_SUBTITLES = "SYNC_SUBTITLES"

export const syncSubtitles = (videoTime) => ({
  type: SYNC_SUBTITLES,
  payload: {
    videoTime
  }
})

要将所有内容连接起来，您需要将redux store连接到您的组件，并提取state.subtitles [state.activeSubtitleId]。您可能会为此进行一些记忆库，例如Reselect。取决于您希望抽样时间的频率。

现在您可以显示正确的字幕。

要使它们保持同步，您需要从已定义的刻度频率的组件调度SYNC_SUBTITLES操作。你可以使用setTimeout来实现这个，或者使用内置的videoplayer tick发射器。

所以连接可能看起来像这样。很傻，但工作。

@connect((state, props) => {
  const activeSubtitleId = state.activeSubtitleId;
  const subtitles = state.subtitles;

  return {
    activeSubtitle: subtitles[activeSubtitleId]
  }
}, {
  syncSubtitles
})

使用Redux向相应的视频显示字幕

1 个答案: