函数式编程实战：从零开始构建 HLS 播放器

2023-10-03 05:29:49

过去半年，我潜心于自己熟悉的音视频领域，探索了函数式编程与状态管理在实践中的应用，成功打造了一款功能完善、易于使用的 HLS 播放器。这段经历让我对函数式编程有了更深入的理解。

无论是面向对象还是函数式编程，关键在于关注点分离。对于某个关注点或功能点，面向对象着重封装实现细节，而函数式编程则专注于清晰简洁地表达意图。

在本文中，我将分享我的函数式编程实战经验，并展示如何一步步构建一个 HLS 播放器，希望能为你的函数式编程之旅提供启发。

从零开始构建 HLS 播放器

第 1 步：定义状态

首先，我们需要定义播放器所需的初始状态，包括视频 URL、当前播放时间和播放状态。我们可以使用 Redux 或 MobX 等状态管理库来管理状态。

const initialState = {
  url: '',
  currentTime: 0,
  isPlaying: false
};

第 2 步：定义操作

接下来，我们定义一些操作来更新状态。每个操作都应该是一个纯函数，它接收当前状态并返回一个新的状态。

const actions = {
  setUrl: (url) => ({
    type: 'SET_URL',
    payload: { url }
  }),
  setCurrentTime: (currentTime) => ({
    type: 'SET_CURRENT_TIME',
    payload: { currentTime }
  }),
  setIsPlaying: (isPlaying) => ({
    type: 'SET_IS_PLAYING',
    payload: { isPlaying }
  })
};

第 3 步：创建播放器组件

现在，我们可以创建一个函数式播放器组件。此组件将使用状态管理库来获取当前状态，并根据状态渲染播放器界面。

const Player = () => {
  const state = useSelector(state => state.player);
  return (
    <div>
      <video src={state.url} currentTime={state.currentTime} autoPlay={state.isPlaying} />
      <button onClick={() => dispatch(actions.setIsPlaying(true))}>播放</button>
      <button onClick={() => dispatch(actions.setIsPlaying(false))}>暂停</button>
    </div>
  );
};

第 4 步：集成 HLS

最后，我们可以集成 HLS，以便播放器能够播放 HLS 流媒体。我们可以使用 video.js 或 hls.js 等库来实现此功能。

import videojs from 'video.js';
import Hls from 'hls.js';

const initializeHls = (videoElement, url) => {
  const hls = new Hls();
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    videojs(videoElement).play();
  });
};