标签: react-player

你好你好吗？我试图react-player在我的 Next.js 应用程序中使用，但没有任何运气。

这段代码

import ReactPlayer from "react-player";

const Home = () => {
return (
  <div>
    <p>Here is my video!!</p>
    <div className={s.wrapper}>
      <ReactPlayer src='https://www.youtube.com/watch?v=zohpogt56Bg' width="100%" 
       height="100%" className={s.player} />
    </div>
  </div>
)}

不断抛出此错误：错误：水合失败，因为初始 UI 与服务器上呈现的内容不匹配。

有人知道发生了什么事吗？谢谢！

我目前正在尝试在 react.js 中在本地主机上播放视频。我正在使用 react-player 模块创建视频播放器组件。我可以使用 youtube 和 facebook 链接等网址播放视频，但我无法使用文件路径使用本地视频。我通读了 github 上该模块的所有文档，但找不到答案，这就是我在这里问您这个问题的原因。下面是我的代码：

import React, { Component } from 'react'
import ReactPlayer from 'react-player'



class Video extends Component {
    render () {
      return (
        <div className='player-wrapper'>
          <ReactPlayer
            className='react-player fixed-bottom'
            url= 'M_03292018202006_00000000U2940605_1_001-1.MP4'
            width='100%'
            height='100%'
            controls = {true}

          />
        </div>
      )
    }
  }

  export default Video;

不知道发生了什么,当我做prod构建时("cross-env NODE_ENV =生产API_V =生产npm运行构建")我从react-player获得此错误:

./node_modules/react-player/lib/ReactPlayer.js中的错误模块构建失败:ReferenceError:在"C:\ work\website \node_modules\react-player \"中指定的未知插件"transform-es3-member-expression-literals" package.json.env.production"在0,尝试解析相对于"C:\ work\website \node_modules\react-player"

我已经从babel中排除了node_modules:

  rules: [
      {
        test: /\.js$/, // Transform all .js files required somewhere with Babel
        exclude: /node_modules\/(?!(react-redux-toastr)\/).*/,
        use: {
          loader: 'babel-loader',
          options: options.babelQuery,
        },
      },

按要求,

webpack.base.babel.js:

/**
 * COMMON WEBPACK CONFIGURATION
 */

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = options => ({
  mode: options.mode,
  entry: options.entry,
  output: Object.assign(
    {
      // Compile into js/build.js
      path: path.resolve(process.cwd(), 'build'),
      publicPath: '/',
    },
    options.output
  ), …

我正在使用 react-player 播放视频。不确定是否有更好的选择，但这似乎可以完成这项工作。我唯一的问题是，我需要获取视频的缩略图。知道我会如何解决吗？

如果您知道在 React Web 应用程序中使用受支持的缩略图播放视频的更好选择，那也很棒。

<ReactPlayer                                                    
 className="videoFrame"
 url={url}
 playing
 controls
/>

谢谢

编辑：我最终将视频本身用作缩略图并阻止其上的所有鼠标事件。然后使用父 div 作为按钮。在 youtube 的情况下，我用 youtube ( https://img.youtube.com )提供的缩略图替换视频，因为视频上的播放按钮很大。大多数其他玩家没有它。

我需要在我的 reactjs 应用程序中集成 RTMP 播放器。我正在获取用于流式传输的 rtmpUrl 并尝试使用 react 播放器，但它不支持 rtmp url。

我正在为我的React网站使用ReactPlayer插件。我想在 vimeo 视频上添加自定义播放按钮和覆盖图像，如下图所示。

当我点击播放按钮叠加图像和按钮需要隐藏和视频开始播放。

播放器链接在这里：https : //jsfiddle.net/e6w3rtj1/

<section className="vm-video">
    <div className="play-btn" onClick={this.handlePlayPause}>{playing ? 'Pause' : 'Play'}>
        <div className="arrow"></div>
    </div>
    <div className="video-preview">
        <img src={videopreviewpic} className="img-fluid" alt="video-preview-img" />
    </div>
    <div className="vc-container player-wrapper">
        <ReactPlayer onPlay={this.handlePlay} url='https://vimeo.com/361808343' className="react-player" controls width='100%' height='100%' />
    </div>
</section>

我正在建立一个在线课程网站。当用户以全屏模式观看课程时，我想记住这一点，以便在安装react-player下一课时使用全屏模式。我希望会有一个onFullscreenMode回调，但文档没有列出任何此类内容。我怎样才能实现这个目标？

编辑1：根据@onkarruikar的回复，我尝试使用screenfull。首先，我很惊讶它没有安装，尽管real-player应该使用它进入全屏模式。安装包并导入后，出现编译错误：

.../node_modules/screenfull/index.js 11:44
Module parse failed: Unexpected token (11:44)
File was processed with these loaders:
.../node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
|   for (const methodList of methodMap) {
>     const exitFullscreenMethod = methodList?.[1];
| 
|     if (exitFullscreenMethod in document) {

编辑2：我也不明白为什么演示使用自定义按钮切换到全屏模式，而我看到一个按钮（) 对播放器本身：

我需要根据react-player
https://www.npmjs.com/package/react-player
提供的控件自定义自己的样式 ，有人可以帮忙吗？

我正在开发一个自定义视频播放器，它使用反应播放器流式传输来自不同来源（YouTube、Vimeo 等）的视频，并且它已经具有我设置的功能控件，例如播放/暂停、音量/静音、进度条和全屏。

我正在尝试添加一个带有弹出窗口的齿轮按钮，该弹出窗口显示不同的分辨率以将视频设置为，但我似乎无法在网上找到任何用于反应播放器的视频质量选择实现。

React-player 是否可以实现这种功能，或者我应该选择不同的 React 视频播放器（例如 video.js）？

我正在尝试在 React Player 组件中添加字幕，这是 React Player 组件的代码

  <ReactPlayer
          url={vidData.media[0]}
          controls={true}
          width={"100%"}
          height={"auto"}
          playing={playVid}
          muted={true}
          className="react-workout-player"
          config={{
            file: {
              attributes: {
                crossOrigin: "true",
              },
              tracks: [
                {
                  kind: "subtitles",
                  src: "https://prod.fitflexapp.com/files/captions/2021/11/18/23-b2j0oOsJ.vtt",
                  srcLang: "en",
                  default: true,
                },
              ],
            },
          }}
        />

我不明白我做错了什么，因为它们没有出现在视频中。请帮忙