用react和Plyr创建本地一个视频播放器

背景

最近正在做一个开源的项目--pear-rec，pear-rec 是一个跨平台的截图、录屏、录音、录像软件。截图功能上篇文章已经讲过了，如果没有看过的可以去看看这篇文章------------手把手教你，用electron实现截图软件，并且项目的框架搭建也可以参考上一篇文章，开发到现在我想要一个音乐（录音）预览、播放功能，说干就干，下面我介绍一下我的开发过程。

介绍

如果你正在寻找一个用于实现自定义设计和功能的视频播放器，Plyr可能会是一个理想的选择。Plyr是一个使用原生HTML5,极其易于使用的播放器库。在本文中，我们将就一些Plyr的视频播放进行探讨。

官网： plyr.io/

github: github.com/sampotts/pl...

实现

Plyr是一种简单、灵活的浏览器媒体播放器。本文将指导读者使用Node.js, React和Plyr创建一个新的视频播放器。

步骤1：创建项目和安装依赖

在开始之前，我们需要安装一些依赖项。请确保您已经安装了以下软件：

Node.js
pnpm
react

在项目的根目录下打开终端，并执行以下命令来初始化一个 React 应用。在这里我就不详细讲解了，不会的可以去看我的文章。

然后安装 plyr 和样式的库：

js 复制代码

// 安装plyr
npm install --save plyr

js 复制代码

// 引入plyr
import Plyr from "plyr";
import "plyr/dist/plyr.css";

二: 创建 Player 组件

创建一个新的React组件，如下名为Player:

javascript 复制代码

import React, { useRef, useEffect } from 'react';
import Plyr from 'plyr';

const Player = ({ videoSrc, videoType }) => {
  const videoRef = useRef();

  useEffect(() => {
    if(!videoRef.current) return;

    const playerInstance = new Plyr(videoRef.current);

    return () => {
      playerInstance.destroy();
    }
  }, []);

  return (
    <video ref={videoRef} controls playsInline>
      <source src={videoSrc} type={videoType || 'video/mp4'} />
    </video>
  );
}

export default Player;

三、在React中使用播放器组件

现在，我们可以在React应用中使用这个新的Player组件：

javascript 复制代码

import React from 'react';
import Player from './Player';

const App = () => {
  const videoUrl = 'https://your-video-url'; 

  return (
    <div className="App">
      <Player videoSrc={videoUrl} />
    </div>
  );
}

export default App;

效果展示

以上就是如何在React中使用plyr创建视频播放器组件的基本步骤。注意，用这种方式创建的播放器在组件被卸载的时候会自动销毁，防止内存泄漏。

总结

通过这篇文章，你应该已经掌握了如何在一个基于React的项目中使用Plyr库创建一个基本的视频播放器。这样的播放器非常适合用于实现自定义的播放器设计和特性，包括完全自定义的播放器控件、画面质量选择、横纵幕等。

Q&A

Q: 有源码吗？

当然有，地址如下：pear-rec，有兴趣的话可以大家一起探讨，同时也欢迎大家fork和star