0


使用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'
  1. 页面相关配置
 return(
  <video ref={videoRef} width="100%" height="80%" id='video' className="video-js"></video> 
 )
  1. 方法
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);
    });
  }
}
  
  1. 每次页面退出时,关闭播放器
 React.useEffect(() => {
    const player = playerRef.current;
    return () => {
       console.log("player会为null,可能跟监听不到playerRef变化有关,旨在初始化的时候赋值player",player)
       console.log("playerRef",playerRef)
    
    };
  }, [playerRef]);

本文转载自: https://blog.csdn.net/weixin_65969505/article/details/130110906
版权归原作者 一只小蜗 - lu 所有, 如有侵权,请联系我们删除。

“使用video.js完成hls/m3u8格式的视频播放”的评论:

还没有评论