Реактив-html5video совместим с рендерингом на стороне сервера? (Используя next.js) - PullRequest
Новая
       22

Реактив-html5video совместим с рендерингом на стороне сервера? (Используя next.js)

0 голосов
/ 28 июня 2018

Я пытаюсь реализовать пример компонента видеоплеера с использованием response-html5video и это тоже при рендеринге на стороне сервера. Для этого я использовал next.js .

  1. Прежде всего я создал файл playerPage в ./pages/playerPage.js
  2. Тогда я создал компонент игрока в ./components/player.js
  3. А затем последовал https://github.com/mderrick/react-html5video/blob/1.4.0/README.md#advanced-usage
  4. Вот так выглядит мой компонент проигрывателя. 

import React from ‘react’;
import { default as Video, Controls, Play, Mute, Seek, Fullscreen, Time, Overlay } from ‘react-html5video’;

class Player extends React.Component {
    render() {
        return (
            <div>
                <Video controls autoPlay loop muted poster=“http://sourceposter.jpg“>
                <source src=“http://sourcefile.mp4” type=“video/mp4" />
                <source src=“http://sourcefile.webm” type=“video/webm” />
                <h1>Optional HTML and components can be added also</h1>
                <Overlay />
                <Controls>
                    <Play />
                    <Seek />
                    <Time />
                    <Mute />
                    <Fullscreen />
                </Controls>
            </Video>
            </div>
        );
    }
}

export default Player;
  1. Теперь импортированный компонент player.js в playerpage.js. 

import Player from '../components/player'

export default () => (
    <Player />
)
  1. Если запустить: npm run dev и перейти к http://localhost:3000/playerPage, я получаю ошибки, подобные изображению.
  2. Getting errors like this

Я уже упоминал свою проблему в ZEIT сообществе один из них сказал:

Звучит так, как реагирующий-html5video не совместим с рендерингом на стороне сервера или чем-то подобным.

Теперь я полностью сбит с толку: есть ли видеоплеер, который совместим с рэгом и серверным рендерингом тоже?

Предложения будут оценены.

Ответы [ 2 ]

0 голосов
/ 18 июля 2018

У меня была та же проблема, поэтому сначала я наткнулся на проблему Play request was interupted ..., а затем я отправил вопрос здесь, в SO , тело не ответило, поэтому я поиграюсь с тем, как я объявляю или импортирую пакет, но затем я получил Navigator is not defined ... ошибку, и затем я пошел в Google, чтобы найти, если кто-нибудь испытывал ту же проблему (и я уверен, что есть), но опять же не найдено решение.

Это то, что до сих пор работало, хотя периодически оно все еще дает мне ошибку Play request was interupted ... 

// my container
import React from 'react'
import PropTypes from 'prop-types'
...

let Player = (<div>Player loading....</div>)

class Post extends React.Component {

  componentDidMount() {
    /* eslint-disable global-require */
    Player = require('react-html5video')
    /* eslint-enable global-require */
  }

  render() {
    return (<Component {...this.props} player={Player} />)
  }
}


export default Post



// my component
import React from 'react'
import PropTypes from 'prop-types'
...

const SomeComponent = (props) => {
  const {
    url
  } = props

  const Player = player.DefaultPlayer ? player.DefaultPlayer : null

  return Player && (
    <Player
      autoPlay
      controls={['PlayPause', 'Seek', 'Time', 'Volume', 'Fullscreen']}
      ...
    >
      <source src={url} />
    </Player>)
}

...

export default SomeComponent

Я знаю, что это не решение, и я почти уверен, что здесь что-то упущено, поэтому, если есть лучшее решение, пожалуйста, опубликуйте ответ здесь, я также обновлю его, как только придумаю решение

0 голосов
/ 02 июля 2018

Кажется, пакет действительно не совместим с SSR. Вы можете попытаться лениво загрузить компонент Player на стороне клиента с помощью Next.js-native Dynamic Imports : 

import dynamic from 'next/dynamic'

const Player = dynamic(import('../components/player'), {
  ssr: false,
  loading: () => <p>Loading player...</p>,
});

export default () => (
  <Player />
);
...