如何解决“未处理的运行时错误”"TypeError: videoRef.current.play不是函数“？
如何解决“未处理的运行时错误”"TypeError: videoRef.current.play不是函数“？
提问于 2022-01-27 07:16:19
我正在尝试向Nextjs站点上的视频添加自定义控件。如果我使用常规的<video>组件，我的代码可以工作，点击自定义播放按钮播放视频，但是如果我使用<ReactPlayer>组件，我得到TypeError；
Unhandled Runtime Error
TypeError: videoRef.current.play is not a function这是我的视频组件的代码；
import videoStyles from '../styles/video.module.css'
import ReactPlayer from 'react-player'
import Image from 'next/image'
import { useRef } from 'react'
import bigPlayImg from '../public/images/purchased-class_play_button.svg'
import playImg from '../public/images/class_details_video_play_icon.svg'
import forwardImg from '../public/images/browse_filters_right_arrow-arrow_carrot-left.svg'
import backImg from '../public/images/browse_filters_left_arrow-arrow_carrot-left.svg'
export default function Video() {
const videoRef = useRef(null);
const videoHandler = (control) => {
if (control === "play") {
videoRef.current.play();
} else if (control === "pause") {
videoRef.current.pause();
}
};
return (
<>
<ReactPlayer
ref={videoRef}
className={videoStyles.video}
url='/videos/samplevideo.mp4'
width='800px'
height='404px'
type='video/mp4'
light='/images/class_overview_video@1x.png'
playing
controls
playIcon={
<Image
src={bigPlayImg}
alt="play icon"
className={videoStyles.playIcon}
width={73}
height={73}
/>
}
/>
{/* <video
ref={videoRef}
className="video"
src='/videos/samplevideo.mp4'
></video> */}
<div className={videoStyles.controlsContainer}>
<div className={videoStyles.controls}>
<Image
src={backImg}
className={videoStyles.controlsIcon}
alt="back icon"
/>
<Image
src={playImg}
onClick={() => videoHandler("play")}
className={videoStyles.controlsIconSmall}
alt="play icon"
/>
<Image
src={forwardImg}
className={videoStyles.controlsIcon}
alt="forward icon"
/>
</div>
</div>
<div className={videoStyles.timecontrols}>
<p className={videoStyles.controlsTime}>1:02</p>
<div className={videoStyles.timeProgressbarContainer}>
<div style={{ width: "40%" }} className={videoStyles.timeProgressBar}></div>
</div>
<p className={videoStyles.controlsTime}>2:05</p>
</div>
</>
)
}根据npm上的“反应者”页面，您应该能够使用ref支柱调用播放机上的实例方法(例如.play() )，就像在普通的html <video>组件上一样；“使用ref调用播放器上的实例方法。有关此示例，请参阅演示应用程序。”
我试过了
- 去掉
<ReactPlayer>组件中的所有支持，除了<video>组件上的基本要素(ref、className和src/url)。 - 更新所有包
- 扯掉我的头发
如何解决错误？
回答 1
Stack Overflow用户
发布于 2022-01-27 07:33:31
就我在您在问题中提供的文档中所读到的内容而言，包没有提供一个play()实例方法，而是提供了一个名为playing的工具。你可以这样用它：
playing：设置为true或false以暂停或播放媒体
import React, {useState} from 'react';
import ReactPlayer from 'react-player';
export default function App() {
const [playing, setPlaying] = useState(false); // or true for autoplay
return (
<>
<Button onClick={() => setPlaying(true)} />
<ReactPlayer playing={playing} />
</>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70874648
复制相关文章
相似问题
腾讯云开发者
