react封装hls视频播放组件

react封装hls视频播放组件

基于hls.js封装的，需要安装依赖 yarn add hls.js || npm install --save hls.js

react封装的HlsPlayer组件：

import { useEffect, useRef } from 'react';
import Hls from 'hls.js';
import styles from './styles.less'

/**
 * @description: hls视频播放组件
 * @param {*} url：视频地址
 * @param {*} autoPlay：是否自动播放，默认false
 * @param {*} errorFn: 视频播放失败返回函数，返回失败信息
 * @return {*}
 */
const HlsPlayer = ({ url, autoPlay = false, errorFn }) => {
  const HlsDOM = useRef();

  useEffect(() => {
    const hls = new Hls();
    hls.loadSource(url);
    hls.attachMedia(HlsDOM.current);

    // 当HLS流的媒体清单被成功解析时
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
      // 加载媒体清单文件
      hls.startLoad();
    });

    hls.on(Hls.Events.ERROR, (error) => {
      console.error('HLS流播放出错:', error);
      if (errorFn) errorFn(error)
    });

    return () => {
      // 销毁
      if (hls) {
        HlsDOM.current?.pause();
        hls.destroy();
      }
    }
  }, [url]);

  return (
    <div className={styles.normal}>
      <video
        className={styles.videoBox}
        ref={HlsDOM}
        autoPlay={autoPlay}
        controls
        muted={autoPlay}
      />
    </div>
  );
}

export default HlsPlayer

HlsPlayer组件样式：

.normal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #000;
  transform-origin: 0 0;

  .videoBox {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

HlsPlayer组件引用方式：

import HlsPlayer from '@/HlsPlayer'; // 组件存放地址
<HlsPlayer
  url='https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8' // 视频地址
  autoPlay={false} // 是否自动播放，默认false
  errorFn={(err)=>{console.log(err);}} // 视频播放失败返回函数
/>