reactjs 视频搜索是不是在react播放器工作

m0rkklqb  于 2023-03-17  发布在  React
关注(0)|答案(2)|浏览(146)

bounty将在3天后过期。回答此问题可获得+50的声誉奖励。scary_devil正在寻找来自声誉良好来源的答案

我正在使用react.js编写一个教育网站作为我的网站的一部分,我需要播放一个视频。在这方面,我使用ReactPlayer包。代码如下:

import React from 'react'
import ReactPlayer from 'react-player'

function VideoPlayer({ url }) {
  console.log(url)
  return (
    <div>
      <ReactPlayer url={url} controls={true} width={'100%'} style={{ maxWidth: '1000px' }} />
    </div>
  )
}

export default VideoPlayer

播放器缓存了视频(通过URL引用),但无法查找视频。播放器好像缓存了文件,但无法转发视频(我的视频文件都是Mp4)。我做错了什么吗?请帮助我解决这个问题。

pw9qyyiw

pw9qyyiw1#

从v2.2开始,如果您的构建系统支持import()语句,请使用react-player/lazy为您传入的url延迟加载适当的播放器。这会向您的输出添加几个reactPlayer块,但会减少您的主包大小。

import ReactPlayer from 'react-player/lazy'

检查迁移到版本2+的文档
https://github.com/CookPete/react-player/blob/HEAD/MIGRATING.md

okxuctiv

okxuctiv2#

你必须自己创造一个探索者,因为React玩家没有。我添加了一些你可以使用的学习材料。
作为起点,使用useRef钩子获取访问react-player支持的每个函数的引用。

const videoPlayerRef = useRef()
<ReactPlayer
    ref={videoPlayerRef}
    [.....]        
    />

工作代码较长,无法放入此处。请 checkout repository

源代码与上述所有功能. https://github.com/wesley-codes/React-player

相关问题