无法使用Rails-Webpacker React Frontend通过Rails Active Storage中的视频进行搜索

Question

好吧,我在使用Rails Webpacker查找反应组件中的视频时遇到问题.我可以让他们玩,但我不能通过他们.

我正在使用Rails Active Storage上传视频,然后通过呈现的html属性将其网址发送到我的react组件rails_blob_path(@post.video)(请参阅下面的代码片段在第9步).在我的react组件中,我有一个<video />元素,其中source是解析属性.从那里我有通过a控制元素的方法React.createRef().其中一个方法(play())按预期工作.但是,我的seek()方法没有,我不明白为什么.

我做了一个缩小的例子(repo)来隔离问题,这里是我采取的以下步骤:

1. rails new [app] --webpacker=react
2. 进入[app], rails active_storage:install
3. rails g scaffold post title:string
4. rails db:migrate
5. 添加行has_one_attached :video到app/models/post.rb
6. 加入:video白名单中的paramsapp/controllers/posts_controller.rb
7. 将下面的代码段添加为表单字段 app/views/posts/_form.html.erb

<div class="field">
  <%= form.label :video %>
  <%= form.file_field :video %>
</div>

9. 添加到下面 app/views/posts/show.html.erb

<div id='payload' url='<%= rails_blob_path(@post.video).to_json %>'></div>
<div id='hello-react'></div>
<%= javascript_pack_tag 'hello_react' %>

10. 变为app/javascript/packs/hello_react.jsx:

import React from 'react'
import ReactDOM from 'react-dom'

const node = document.getElementById('payload')
const url = JSON.parse(node.getAttribute('url'))

class App extends React.Component {

  componentWillMount() {
    this.videoRef = React.createRef()
  }

  seek = (seekTo = 0) => {
    this.videoRef.current.currentTime = seekTo
  }

  play = () => {
    this.videoRef.current.play()
  }

  render() {
    return (
      <div>
        <video ref={this.videoRef} controls>
          <source src={url} type='video/mp4' />
        </video>
        <button onClick={ (e) => {this.seek(5)} }>+5</button>
        <button onClick={ (e) => {this.play()} }>Play</button>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('hello-react')
)

11. 启动服务器rails s,转到localhost:3000/posts/new
12. 创建一个帖子(你需要一个视频上传),你将被重定向提交到hello-react包.

我以前发过这个,但还没有得到答案.这是我第一次做出一个单独的项目,并概述了隔离问题的步骤.希望这能传达我的绝望程度.如果我需要解释任何步骤或者您是否需要更多信息,请告诉我.提前感谢大家的帮助.

编辑11/11/18:一个答案指出这是一个浏览器问题.我使用Chrome进行所有测试,但是当我使用FireFox时,它按预期工作.仍然不确定如何解决这个问题,以便应用程序跨浏览器工作.

Answer 1

我已经尝试过您的代码，并且我假设您在Chrome中测试了您的应用程序。它可能无法在Chrome中工作.Chrome服务器中的某些设置使其无法与currentTime一起使用。

因此，我建议您在其他浏览器上尝试使用它，例如firefox。如果通常要在Chrome中使用它，请在线设置应用程序并设置视频完整网址的src。

顺便说一句，+ 5按钮应该是+ =否=？

this.videoRef.current.currentTime += seekTo 

this.videoRef.current.currentTime = seekTo

关于完整网址，现在视频的网址设置如下所示：“ / rails / active_storage / disk /.../ test.mp4”

<source src={url} type='video/mp4' />

您可以将URL更改为示例进行检查。

<source src={"https://video.pc6.com/v/1807/bdsphcsp.mp4"} type='video/mp4' />

此处的src只是一个示例，以http或https开头，以mp4结尾。

关于完整网址和http / https

这个问题的解释有点复杂，有很多方法，但是我对nginx和puma很熟悉，因此我给出了一个基于它们的过程。

1.您需要具有公共IP的在线服务器。

2.您需要一个域名；

3.将puma添加到Rails项目，将项目克隆到在线服务器，并使用“ bundle exec -C config / puma.rb -d”运行它

4. 在nginx中部署nginx并配置域名？端口？主机记录和其他内容

5. 将网址添加到hello-react.jsx中的“网址”中，如下所示：

   src = {“ https：// ....” + url}