Не удается найти видео из хранилища Rails Active Storage с помощью Rails-Webpacker React Frontend

Question

Хорошо, у меня возникла проблема с поиском видео в моих компонентах реакции с помощью Rails Webpacker. Я могу заставить их играть, но я не могу их искать.

Я использую Rails Active Storage для загрузки видео, а затем отправляю их URL-адреса в мой компонент реагирования через атрибут html, представленный rails_blob_path(@post.video) (см. Фрагмент ниже на шаг 9 ). В моем компоненте реагирования у меня есть элемент <video /> с источником, который является атрибутом parsed. Оттуда у меня есть методы, которые управляют элементом через React.createRef(). Один из методов (play()) работает как положено. Однако мой seek() метод не подходит, и я не понимаю, почему.

Я сделал минимизированный пример (репо) , чтобы изолировать проблему, и вот следующие шаги, которые я предпринял:

1. rails new [app] --webpacker=react
2. компакт-диск в [приложение], 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. добавить ниже фрагмент как поле формы в 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 полного URL-адреса видео.

Кстати, кнопка +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

Эта проблема немного сложна для объяснения. Есть много способов, но я знаком с nginx и puma. Поэтому я даю процесс, основанный на них.

1.Вы нуждаетесь в онлайн-сервере с IP-адресом сети.

2.Вы нуждаетесь в доменном имени;

3.Добавить проект puma to rails, клонировать проект на онлайн-сервер и запустить его с помощью "bundle exec -C config / puma.rb -d"

4. развернуть nginx и настроить имя домена name порт 、 запись хоста и другие вещи в nginx

5. добавьте url к вашему url в hello -act.jsx, например:

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