Question

好的，所以我在使用Rails Webpacker在我的react组件中查找视频时遇到问题。我可以让他们玩，但我找不到他们。

我正在使用Rails Active Storage上传视频，然后通过rails_blob_path(@post.video)呈现的html属性将其网址发送到我的react组件（请参见下面的第9步片段）。在我的react组件中，我有一个<video />元素，其来源就是该解析属性。从那里，我有了通过React.createRef()控制元素的方法。方法之一（play()）可以正常工作。但是，我的seek()方法没有，我也不明白为什么。

我做了minified example (repo)来找出问题所在，这是我采取的以下步骤：

rails new [app] --webpacker=react
cd进入[app]，rails active_storage:install
rails g scaffold post title:string
rails db:migrate
将行has_one_attached :video添加到app/models/post.rb
将:video添加到app/controllers/posts_controller.rb中白名单的参数中
在摘要下方添加为app/views/posts/_form.html.erb中的表单字段

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

在下面添加到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' %>

将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')
)

使用rails s启动服务器，然后转到localhost:3000/posts/new
创建一条帖子（您需要上传视频），然后在提交到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' />

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

<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”运行它

部署nginx并在nginx中配置域名，端口，主机记录和其他内容
将网址添加到hello-react.jsx中的“网址”中，如下所示：

src = {“ https：// ....” +网址}

无法使用Rails-Webpacker React Frontend从Rails Active Storage中搜索视频

1 个答案:

关于完整网址和http / https