使用video.js完成hls/m3u8格式的视频播放

近期项目中，需要播放视频，最开始给了个测试接口是hls格式的，查了一下，使用了video.js插件来进行播放。后期又改成了flv视频，这里简单记录一下。

1. 下载video.js插件，以及contrib-hls播放插件，页面引入，这两个插件，以及样式

这里好像涉及到版本问题，高版本的video.js不用下载另一个插件，但是好像会有其他冲突。

import Videojs from "video.js"
import 'video.js/dist/video-js.css';
import 'videojs-contrib-hls.js'

2. 页面相关配置

 return（
  <video ref={videoRef} width="100%" height="80%" id='video' className="video-js"></video> 
 ）

3. 方法

const videoRef = React.useRef(null);
//1.必须要声明一个播放器的容器  playerRef 就相当于播放器的容器
const playerRef = React.useRef<any>(null);

// -- 点击时去调接口，播放视频 --方法
const getInfo = async () => {

  // 当前有视频时，先关闭视频，再重新创建、获取
  if (playerRef.current) {
    playerRef.current.dispose();
    playerRef.current = null;
  }

  // playerRef没有值时，去进行下一步
  if (!playerRef.current) {
    console.log('进入重新创建')

    // videoRef,video实例 -- current: video#video.video-js
    const videoElement = videoRef.current;
    // if (!videoElement) return;

    // 这些options属性也可直接设置在video标签上
    const options = {
      autoplay: true, // 设置自动播放
      controls: true, // 显示播放的控件,控制条
      preload: 'auto', // 自动加载
      muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
      language: 'zh-CN',
      fluid: true, //类型： boolean 何时true，Video.js播放器将具有流畅的大小。换句话说，它将扩展以适应其容器
      responsive: true, // 响应性：为true时，播放视频进度条会自动移动
      // sources: [
      //   // 注意，如果是以option方式设置的src,是不能实现 换台的 (即使监听了hlsUrl也没实现)
      //   {
      //     src: 'http://39.173.75.10:10019/hls2/D17AC57A16F173E5BA55C0B106D10CC9.m3u8',
      //     type: 'application/x-mpegURL' // 告诉videojs,这是一个hls流
      //   },
      // {
      //     src: `${Video_Api}/test/jishi.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20230323%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20230323T034640Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=4a17446110e1201c1c56bd9c4133ac98255f9ac4d54f708f6e24c42091a2e6a6`,
      //      type: 'video/mp4'
      //         }
      // ]
    }
   // handlePlayerReady所在的函数，就是播放器初始化完成时会执行的回调函数
    const handlePlayerReady = (player) => {
      playerRef.current = player;
      // you can handle player events here
      player.on('waiting', () => {
        console.log('player is waiting');
      });
      player.on('dispose', () => {
        console.log('player will dispose');
      });
    };
 
    const player = playerRef.current = Videojs(videoElement, options, () => {
      console.log("player is ready");
    // src地址设为了变量
      player.src({ src: address, type: "application/x-mpegURL" })
      player.play();
      handlePlayerReady(player);
    });
  }
}

4. 每次页面退出时，关闭播放器

 React.useEffect(() => {
    const player = playerRef.current;
    return () => {
       console.log("player会为null，可能跟监听不到playerRef变化有关，旨在初始化的时候赋值player",player)
       console.log("playerRef",playerRef)
    
    };
  }, [playerRef]);

使用video.js完成hls/m3u8格式的视频播放

猜你喜欢