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

Question

好的，我在使用 Rails Webpacker 搜索我的 React 组件中的视频时遇到了问题。我可以让他们玩，但我不能通过他们寻求。

我正在使用 Rails Active Storage 上传视频，然后通过 rails_blob_path(@post.video) 渲染的 html 属性将它们的 url 发送到我的 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
创建一个 post（您需要上传视频），您将在提交到 hello-react 包时被重定向。

我之前已经 post 编辑过这个但是还没有得到答案。这是我第一次制作单独的项目和隔离问题的步骤大纲。希望这能传达我有多绝望。如果我需要解释任何步骤，或者如果你们都需要更多信息，请告诉我。预先感谢大家的帮助。

编辑 2018 年 11 月 11 日：一个答案指出这是浏览器问题。我使用 Chrome 进行所有测试，但当我使用 FireFox 时，它按预期工作。仍然不确定如何解决这个问题，以便该应用程序可以跨浏览器运行。

Answer 1

我试过你的 code.And 我假设你在 Chrome.It 中测试你的应用程序可能在 Chrome.There 中不工作是 Chrome 服务器中的一些设置使它可以'用 currentTime 锻炼。

所以我建议你换个浏览器试试，比如firefox.And如果你平时想在Chrome中使用，把应用程序设置为在线，并设置完整的[=65]的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' />

您可以将url改成示例进行验证。

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

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

关于完整 url 和 http/https

这个问题有点复杂explain.There方法很多，不过我对nginx比较熟悉，puma.So我根据他们给出一个过程

1.You需要有公网IP的在线服务器

2.You需要域名；

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

部署nginx并在nginx中配置域名、端口、主机记录等
在 hello-react.jsx 中将 url 添加到你的 "url"，像这样：

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

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

Can't seek through video from Rails Active Storage with Rails-Webpacker React Frontend

javascript

html

reactjs

ruby-on-rails-5.2

关于完整 url 和 http/https