直播流播放组件

01 使用

 <Player id="mycamera" url="xxx.flv"/>

02 封装

1. 第三方库：flv.js
2. 播放组件

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

// 传入id和链接
const Player = ({ id, url }) => {
   let { current: player } = useRef(null); // 实例
   
   // 创建播放器
   const handleCreatePlayer = () => {
      // 创建DOM
      let videoElement = document.getElementById(id);
      if (_.isNull(videoElement)) {
         return;
      }
      
     // 设置音量
      videoElement.volume = 10; 

     // 创建实例
      player = flvjs.createPlayer({
         type: 'flv',
         url: url    // flv的链接
      });
      player.attachMediaElement(videoElement);
      player.load();

     // 播放
      let playPromise = player.play();
      if (playPromise !== undefined) {
         playPromise
            .then(() => {
               player.play();
            })
            .catch(() => {});
      }
   };

   //  摧毁播放器
   const handleDestroyPlayer = () => {
      if (player) {
         player.pause();
         player.unload();
         player.detachMediaElement();
         player.destroy();
         player = null;
      }
   };


   // 如果url变换 把之前的播放器摧毁，再创建新的
   useEffect(() => {
      handleDestroyPlayer();
      handleCreatePlayer();
   }, [url]);


   // 组件销毁时摧毁播放器
   useEffect(() => {
      return () => {
         handleDestroyPlayer();
      };
   }, []);

   return (
       {/* 隐藏video默认控件 */}
       <div>
            <video id={id} muted autoplay controls="controls" controlslist="nodownload noplaybackrate" disablePictureInPicture/>
       </div>
   );
};
export default Player;

3. CSS隐藏video默认控件

  //全屏按钮
   video::-webkit-media-controls-fullscreen-button {
      display: none;
   }
   //播放按钮
   video::-webkit-media-controls-play-button {
      display: none;
   }
   //进度条
   video::-webkit-media-controls-timeline {
      display: none;
   }
   //观看的当前时间
   video::-webkit-media-controls-current-time-display {
      display: none;
   }
   //剩余时间
   video::-webkit-media-controls-time-remaining-display {
      display: none;
   }

   //音量按钮
   video::-webkit-media-controls-mute-button {
      display: none;
   }