[英]Is react-html5video is compatible with server side rendering ?? (Using next.js)
I'm trying to implement a sample video player component using react-html5video and that too in server side rendering. 我正在尝试使用react-html5video以及在服务器端渲染中实现示例视频播放器组件。 I've used next.js for that.
我已经使用next.js了。
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;
import Player from '../components/player' export default () => ( <Player /> )
npm run dev
and go to http://localhost:3000/playerPage
am getting errors like the image. npm run dev
并转到http://localhost:3000/playerPage
收到类似图像的错误。 I've already mentioned my issue in ZEIT community one of them said : 我已经在ZEIT社区中提到过我的问题,其中一位说:
Sounds like react-html5video is not compatible with server side rendering or something.
听起来像react-html5video与服务器端渲染不兼容。
Now I'm totally confused: is there any video player that is compatible with react and server-side rendering too?? 现在我完全感到困惑:是否有任何与React和服务器端渲染兼容的视频播放器?
Suggestions will be appreciated. 建议将不胜感激。
It seems the package is indeed not compatible with SSR. 似乎该软件包确实与SSR不兼容。 You could try to lazy-load your
Player
component on the client side with Next.js-native Dynamic Imports : 您可以尝试使用Next.js-native Dynamic Imports在客户端上延迟加载
Player
组件:
import dynamic from 'next/dynamic'
const Player = dynamic(import('../components/player'), {
ssr: false,
loading: () => <p>Loading player...</p>,
});
export default () => (
<Player />
);
Had the same problem, so first i stumble upon a Play request was interupted ...
problem, and then i post a question here in SO , no body answered, so i play around with how i declare or import the package, but then i got Navigator is not defined ...
error, and then i went to google to find if anybody experienced the same issue (and i am sure there are), but again no solution found. 遇到了同样的问题,所以我首先偶然发现了一个
Play request was interupted ...
问题,然后我在这里在SO中发布了一个问题 ,没有人回答,所以我在玩我如何声明或导入包,但是然后我得到的Navigator is not defined ...
错误,然后我去谷歌搜索是否有人遇到相同的问题(而且我敢肯定有),但是再也找不到解决方案。
This is what did so far, its working, although intermittently still giving me the Play request was interupted ...
error 到目前为止,这确实
Play request was interupted ...
,尽管间歇性地仍给我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
I know that this is not a solution, and i am pretty sure that i miss something here, so if there's a better solution, please post an answer here, i will also update this as soon as i come up with a solution 我知道这不是解决方案,而且我很确定我会在这里遗漏一些东西,因此,如果有更好的解决方案,请在此处发布答案,一旦我提出解决方案,我也会对此进行更新
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.