Question

因此，我有一个应用程序(link to repo)，用户可以在其中通过Rails Active Storage上传视频来发布帖子。当查看帖子时，我希望用户能够单击时间戳，这将更改帖子视频的currentTime并允许他们查找。我已经能够使视频显示并播放，但我找不到它。这是逐步进行的事情：

Rails呈现app/views/posts/_post_modal.html.haml，这是一种模式，当单击帖子上的按钮时，该模式可提供带有评论和提示的帖子的详细视图。下面是第17-26行，其中准备了用于反应的有效负载。我将视频的path作为属性传递给<div id="owc-post-payload">

.modal-body.border-dark
  - reviews = Review.where(post_id: post.id)
  - tips = []
  - profiles = []
  - reviews.each do |review|
    - Tip.where(review_id: review.id).each { |tip| tips.push(tip) }
    - profiles.push(Profile.find(review.profile_id))
  #owc-post-payload{ post: post.to_json, video: rails_blob_path(post.video).to_json, reviews: reviews.to_json, profiles: profiles.to_json, tips: tips.to_json }
  #owc_post
  = javascript_pack_tag 'owc_post'

接下来，我的component's状态被初始化（由Redux管理）。 reviewsReducer.js中状态的一半。另一半在timestampReducer.js中。

在app/javascript/owc_post中，index.js在App.js中渲染/components（下），在VideoPlayer.js中渲染。

const App = (props) => (
  <div className='row'>
    <div className='col-xl-6 pr-3 sticky-top'>
      <div className='mb-2 sticky-top'>
        <VideoPlayer post={post.id} source={video} timestamp={props.timestamp} />
      </div>
      <button onClick={(e) => { props.dispatch(changeTime(15)) }}>=15</button>
      <button onClick={(e) => { props.dispatch(changeTime(30)) }}>=30</button>
      <button onClick={(e) => { props.dispatch(changeTime(45)) }}>=45</button>
    </div>
    <div className='col-xl-6'>
      ...
    </div>
  </div>
);

这是问题所在。当我单击<App/>（“ = 15”，“ = 30”，“ = 45”），{{ 1}}的更改，这也会更改state.timestampReducer的道具（如下）。这会触发<VideoPlayer/>，它会触发componentDidUpdate()内部的seek()，我清楚地看到我的组件正在通过seek()进行更新，但是视频的currentTime属性不会更改，并且我没有知道为什么。

console.log()

我

Here I have a screenshot单击不同的按钮以及收到的反馈。最后一个export default class VideoPlayer extends React.Component { constructor(props) { super(props); this.state = { source: props.source, timestamp: props.timestamp }; this.videoRef = React.createRef(); } componentDidUpdate(prevProps) { if (this.props !== prevProps) { this.setState( { timestamp: this.props.timestamp }, () => { this.seek() } ); } } seek = () => { console.log('inside seek') console.log(this.state.timestamp) console.log(this.videoRef.current) console.log('before: ' + this.videoRef.current.currentTime) this.videoRef.current.currentTime = this.state.timestamp; console.log('after: ' + this.videoRef.current.currentTime) } render() { return ( <div> <video ref={this.videoRef} id='video-player' height='200px' type='video/mp4' controls> <source src={this.state.source} type='video/mp4' /> </video> </div> ); } }是当我播放视频然后单击一个按钮时。单击按钮后，currentTime始终重置为0。

那是我的问题。我不能寻求它。请让我知道是否大家都需要更多信息，并在此先感谢您的帮助。

Rails + Webpacker-React，无法设置Active Storage中视频的当前时间

0 个答案: