react-html5video 是不是与服务器端渲染兼容？ （使用 next.js）

Posted 2023-02-22

【中文标题】react-html5video 是不是与服务器端渲染兼容？ （使用 next.js）

【英文标题】：Is react-html5video is compatible with server side rendering ?? (Using next.js)react-html5video 是否与服务器端渲染兼容？ （使用 next.js）

【发布时间】：2018-12-07 04:12:05

【问题描述】：

我正在尝试使用 react-html5video 以及在服务器端渲染中实现示例视频播放器组件。为此我使用了next.js。

首先，我在 ./pages/playerPage.js 下创建了一个名为 playerPage 的文件 然后我在 ./components/player.js 下创建了播放器组件 然后关注https://github.com/mderrick/react-html5video/blob/1.4.0/README.md#advanced-usage 这是我的播放器组件的外观。

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;

现在在 playerpage.js 中导入 player.js 组件。

import Player from '../components/player'

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

如果运行：npm run dev 并转到 http://localhost:3000/playerPage，我会收到类似图像的错误。

我已经在ZEIT community 中提到了我的问题，其中一位说：

听起来 react-html5video 和服务器端渲染什么的不兼容。

现在我很困惑：有没有兼容 react 和服务器端渲染的视频播放器？？

我们将不胜感激。

【参考方案1】：

看来这个包确实不兼容s-s-r。您可以尝试使用 Next.js-native Dynamic Imports 在客户端延迟加载您的 Player 组件：

import dynamic from 'next/dynamic'

const Player = dynamic(import('../components/player'), 
  s-s-r: false,
  loading: () => <p>Loading player...</p>,
);

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

【参考方案2】：

遇到了同样的问题，所以首先我偶然发现了Play request was interupted ... 问题，然后我发布了a question here in SO，没有人回答，所以我尝试了如何声明或导入包，但后来我得到了@987654323 @error，然后我去谷歌查找是否有人遇到过同样的问题（我相信有），但还是没有找到解决方案。

这是迄今为止所做的，它的工作，虽然间歇性仍然给我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

我知道这不是解决方案，我很确定我在这里遗漏了一些东西，所以如果有更好的解决方案，请在此处发布答案，我也会在提出解决方案后立即更新