无法使用 Rails-Webpacker React Frontend 从 Rails Active Storage 中寻找视频

Question

好的，所以我在使用 Rails Webpacker 浏览我的反应组件中的视频时遇到了问题。我可以让他们玩，但我不能通过他们寻找。

我正在使用 Rails Active Storage 上传视频，然后通过 rails_blob_path(@post.video) 呈现的 html 属性将它们的 url 发送到我的 react 组件（请参阅下面的 sn-p 步骤 9）。在我的反应组件中，我有一个 <video /> 元素，其源是解析后的属性。从那里我有通过React.createRef() 控制元素的方法。其中一种方法（play()）按预期工作。但是，我的 seek() 方法没有，我不明白为什么。

我创建了minified example (repo) 来隔离问题，以下是我采取的步骤：

1. rails new [app] --webpacker=react
2. cd 进入 [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 添加到app/controllers/posts_controller.rb 中的白名单参数中
7. 在sn-p下方添加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中使用，请将应用设置为在线，并设置视频完整url的src。

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

this.videoRef.current.currentTime += seekTo 

this.videoRef.current.currentTime = seekTo

关于完整的 url，现在视频的 url 设置是这样的：“/rails/active_storage/disk/.../test.mp4”

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

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

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

这里的src只是一个例子，以http或https开头，以mp4结尾·

关于完整的url和http/https

这个问题解释起来有点复杂。方法有很多，但是我对nginx和puma比较熟悉。所以我根据它们给出一个过程。

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

2.你需要一个域名；

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

4. 部署nginx并在nginx中配置域名、端口、主机记录等东西

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

   src={"https://...."+ url}