获取视频进度

最新推荐文章于 2024-10-03 23:00:32 发布

ZhuCongLin_68

最新推荐文章于 2024-10-03 23:00:32 发布

阅读量134

点赞数 3

文章标签：音视频 javascript 前端

本文链接：https://blog.csdn.net/ZhuCongLin_68/article/details/141756086

版权

import React, { useState, useEffect } from "react";
import LoadIcon from "@/assets/svgs/VisionSvg/loading.svg";
import BackIcon from "@/assets/imgs/no-data.png";
import classNames from "classnames/bind";
import * as styles from "./style.less";
const cx = classNames.bind(styles);

const VideoLoader: React.FC = () => {
  const [loadingProgress, setLoadingProgress] = useState(30);

  useEffect(() => {
    const videoUrl = "https://media.hidreamai.com/1dcfadd4-2058-497c-9197-69b62ac0fbc0.mp4"; // 替换为你的视频 URL

    const xhr = new XMLHttpRequest();
    xhr.open("GET", videoUrl, true);
    xhr.responseType = "blob"; // 使用 `blob` 类型以便处理大文件

    xhr.onprogress = (event) => {
      if (event.lengthComputable) {
        const progress = (event.loaded / event.total) * 100;
        setLoadingProgress(progress);
      }
    };

    xhr.onload = () => {
      if (xhr.status === 200) {
        setLoadingProgress(100); // 完全加载后设置进度为 100%
        const videoBlob = xhr.response;
        const videoUrl = URL.createObjectURL(videoBlob);
        console.log("Video loaded successfully:", videoUrl);
      }
    };

    xhr.onerror = () => {
      console.error("Failed to load the video.");
    };

    xhr.send();
  }, []);

  return (
    <div className={cx("video-progress")}>
      {loadingProgress < 100 ? (
        <>
          <img className={cx("video-progress-load")} alt="" src={LoadIcon} />
          <div className={cx("video-progress-num")}>{Math.round(loadingProgress)}%</div>
        </>
      ) : (
        <img className={cx("video-first-png")} alt="" src={BackIcon} />
      )}
    </div>
  );
};

export default VideoLoader;

.video-progress {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  .video-progress-load {
    width: 48px;
    height: 48px;
  }
  .video-progress-num {
    font-size: 14px;
    color: #ffffff;
    line-height: 20px;
    letter-spacing: 0.5px;
    margin-top: 8px;
  }
  .video-first-png {
    height: 100%;
  }
}