你唯一能找到的指导居然 🥴。
为网页应用创建一个自定义视频播放器是增强用户体验的强大方式，特别是通过添加自定义控件和全屏模式等特性。添加画中画（PiP） 功能是另一个让视频播放器更吸引人的特点，允许用户在浏览其他页面时继续观看视频。
在这篇文章中，我们将实现画中画功能以及播放/暂停、音量、全屏等功能，并添加键盘快捷键，来扩展我们自定义的 React 视频播放器。
技术前提：包括基本知识的 JavaScript、React 和 Next.js。
目录：- 安装所需的软件包
- 设置基本的视频播放器功能
- 添加自定义播放控件
- 实现全屏播放
- 设置键盘快捷键
- 添加画中画功能
- 结束语
确保你在项目中安装了 react-player。
运行以下命令来安装react-player模块:
npm install react-player（这是一个npm命令，用于安装react-player模块）
2. 设置基本的视频播放我们的自定义视频播放器基于 ReactPlayer 组件，这里有一个简单的版本：
import React, { useState, useRef } from 'react';
import ReactPlayer from 'react-player';
import { Box } from 'styled-system';
export const VideoPlayer = ({ source }) => {
const playerRef = useRef(null);
const [playing, setPlaying] = useState(false);
const handlePlayPause = () => {
setPlaying((prev) => !prev);
};
return (
<Box w="100%">
<ReactPlayer
ref={playerRef}
url={source}
playing={playing}
controls={false}
width="100%"
height="auto"
/>
<button onClick={handlePlayPause}>
{playing ? '停' : '开始'}
</button>
</Box>
);
};这段代码创建了一个简单的视频播放器，用户可以在这里进行播放和暂停操作。
3. 添加自定义控件接下来，我们将实现一下自定义的播放/暂停、快进、倒退和调节音量等功能。
import React, { useCallback, useState, useRef } from 'react';
import ReactPlayer from 'react-player';
import { Box, Flex, Button, Slider } from 'styled-system';
export const VideoPlayer = ({ source }) => {
const playerRef = useRef(null);
const [playing, setPlaying] = useState(false);
const [volume, setVolume] = useState(0.5);
const [played, setPlayed] = useState(0);
const handlePlayPause = useCallback(() => {
setPlaying(prev => !prev);
}, []);
const seekForward = () => {
playerRef.current.seekTo(playerRef.current.getCurrentTime() + 10);
};
const seekBackward = () => {
playerRef.current.seekTo(playerRef.current.getCurrentTime() - 10);
};
return (
<Box w="100%">
<ReactPlayer
ref={playerRef}
url={source}
playing={playing}
volume={volume}
onProgress={({ played }) => setPlayed(played)}
controls={false}
width="100%"
height="auto"
/>
<Flex justify="space-between">
<Button onClick={seekBackward}>快退</Button>
<Button onClick={handlePlayPause}>
{playing ? '暂停' : '播放'}
</Button>
<Button onClick={seekForward}>快进</Button>
</Flex>
{/* 音量控制（带输入）*/}
<Box mt="2">
<label htmlFor="volume">音量：</label>
<input
id="volume"
type="range"
min="0"
max="1"
step="0.01"
value={volume}
onChange={(e) => setVolume(parseFloat(e.target.value))}
/>
</Box>
{/* 进度控制（带输入）*/}
<Box mt="2">
<label htmlFor="progress">进度：</label>
<input
id="progress"
type="range"
min="0"
max="1"
step="0.01"
value={played}
onChange={(e) => {
const newValue = parseFloat(e.target.value);
setPlayed(newValue);
playerRef.current.seekTo(newValue);
}}
/>
</Box>
</Box>
);
};全屏模式可以通过浏览器的原生API来启用。下面是如何添加一个全屏切换按钮的方法：
const [isFullscreen, setIsFullscreen] = useState(false);
const videoRef = useRef(null);
const toggleFullscreen = () => {
if (!isFullscreen) {
videoRef.current.requestFullscreen();
} else {
document.exitFullscreen();
}
setIsFullscreen(prev => !prev);
};
return (
<Box ref={videoRef} w="100%">
{/* 视频播放器的内容 */}
<Button onClick={toggleFullscreen}>
{isFullscreen ? '退出' : '进入全屏'}
</Button>
</Box>
);你可以添加键盘快捷键来控制视频播放。比如，空格键用于播放/暂停，箭头键可以用来前后移动。
useEffect(() => {
const handleKeyDown = (event) => {
switch (event.key) {
case ' ':
handlePlayPause();
event.preventDefault();
break;
case 'ArrowRight':
seekForward();
break;
case 'ArrowLeft':
seekBackward();
break;
case 'f':
toggleFullscreen();
break;
default:
break;
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [handlePlayPause, seekForward, seekBackward, toggleFullscreen]);Picture-in-Picture (PiP) 模式 允许用户在小的可移动窗口中继续观看视频，同时与网页的其他部分互动操作不受影响。可以通过浏览器内置的 requestPictureInPicture() API 轻松实现这个功能。
这里是如何为播放器添加画中画的方法。
const [isPip, setIsPip] = useState(false);
const togglePictureInPicture = async () => {
if (playerRef.current && !isPip) {
try {
await playerRef.current.getInternalPlayer().requestPictureInPicture();
setIsPip(true);
} catch (error) {
console.error('画中画请求失败:', error);
}
} else if (document.pictureInPictureElement) {
await document.exitPictureInPicture();
setIsPip(false);
}
};
return (
<Box w="100%">
<ReactPlayer
ref={playerRef}
url={source}
playing={playing}
volume={volume}
onProgress={({ played }) => setPlayed(played)}
controls={false}
width="100%"
height="auto"
/>
<Button onClick={togglePictureInPicture}>
{isPip ? '退出全屏' : '全屏播放'}
</Button>
</Box>
);在这里，我们用requestPictureInPicture()方法来激活PiP模式。如果PiP模式已激活，按钮将变为“退出PiP”并调用document.exitPictureInPicture()来退出PiP模式。
要将自定义的 VideoPlayer 组件集成到您的 React 项目里，您可以将视频源作为属性传给 VideoPlayer 组件。这可以让视频从各种来源（如 URL 或文件路径等）动态加载。
VideoPlayer 组件
例如，如果你有一个事件对象（例如包含视频录制的URL），你可以这样用VideoPlayer组件：
<VideoPlayer source={video.source} />在这种情况下，video.source 指向从您的数据动态获取的视频 URL。VideoPlayer 组件将使用我们之前实现的自定义控件来播放视频，包括但不限于播放/暂停、快进/后退、音量控制、画中画模式（PiP）和进度条。
通过动态传递源文件，你可以确保你的 VideoPlayer 在各种应用部分中可复用，使其成为需要多个视频实例的理想选择。
使用 react-player 自定义视频播放器提供了无数种增强用户体验的可能性。通过加入播放/暂停、全屏模式、画中画等功能，您可以打造一个符合各种需求的现代视频播放器。
本指南中提到的一些重要特点包括：等。
（注：句末的“等”可省略，直接加句号即可。最终版本为：本指南中提到的一些重要特点包括：。）
因此，最终翻译为：
本指南中提到的一些重要特点包括：。
- 播放/暂停控制
- 快进/快退功能
- 音量控制
- 全屏切换
- 画中画模式
- 键盘可用性
这种分步方法将帮助你实现一个功能丰富的视频播放器，从而增强应用程序的用户参与度和可访问性。
觉得这篇文章有帮助又有趣吗？那就分享一下吧。
在接下来的文章里，我会添加更多控件和功能，也听听你们想看到哪些控件。
随时随地看视频
