React + SpringBoot实现图片预览和视频在线播放,其中视频实现切片保存和分段播放

图片预览和视频在线播放

需求描述

实现播放视频的需求时,往往是前端直接加载一个mp4文件,这样做法在遇到视频文件较大时,容易造成卡顿,不能及时加载出来。我们可以将视频进行切片,然后分段加载。播放一点加载一点,这样同一时间内只会加载一小部分的视频,不容易出现播放卡顿的问题。下面是实现方法。

对视频切片使用的是 ffmpeg,可查看我的这个文章安装使用

后端接口处理

后端需要处理的逻辑有

  1. 根据视频的完整地址找到视频源文件
  2. 根据视频名称进行MD5,在同级目录下创建MD5文件夹,用于存放生成的索引文件和视频切片
  3. 前端调用视频预览接口时先判断有没有索引文件
    1. 如果没有,则先将mp4转为ts,然后对ts进行切片处理并生成index.m3u8索引文件,然后删除ts文件
    2. 如果有,则直接读取ts文件写入到响应头,以流的方式返回给浏览器
  4. 加载视频分片文件时会重复调用视频预览接口,需要对请求进来的参数做判断,判断是否是请求的索引还是分片

首先定义好接口,接收一个文件ID获取到对应的文件信息

@ApiOperation("文件预览")
@GetMapping("preview/{fileId}")
public void preview(@PathVariable String fileId, HttpServletResponse response) {
    if (fileId.endsWith(".ts")) {
        filePanService.readFileTs(fileId, response);
    } else {
        LambdaUpdateWrapper<FilePan> qw = new LambdaUpdateWrapper<>();
        qw.eq(FilePan::getFileId, fileId);
        FilePan one = filePanService.getOne(qw);
        if (ObjectUtil.isEmpty(one)) {
            throw new CenterExceptionHandler("文件不存在");
        }
        filePanService.preview(one, response);
    }
}

视频信息如下图

image-20240608111547732

在磁盘上对应的视频

image-20240608111647759

数据库中存放是视频信息

image-20240608111720899

当点击视频时,前端会拿到当前的文件ID请求上面定义好的接口,此时 fielId 肯定不是以 ts 结尾,所以会根据这个 fileId 查询数据库中保存的这条记录,然后调用 filePanService.preview(one, response) 方法

preview方法

preview方法主要处理的几个事情

  1. 首先判断文件类型是图片还是视频
  2. 如果是图片是直接读取图片并返回流
  3. 如果是视频
    1. 首先拿到视频名称,对名称进行md5处理,并生成文件夹
    2. 创建视频ts文件,并对ts进行切片和生成索引
  4. 加载分片文件时调用readFileTs方法
/**
 * 文件预览
 */
@Override
public void preview(FilePan filePan, HttpServletResponse response) {
    // 区分图片还是视频
    if (FileTypeUtil.isImage(filePan.getFileName())) {
        previewImg(filePan, response);
    } else if (FileTypeUtil.isVideo(filePan.getFileName())) {
        previewVideo(filePan, response);
    } else {
        throw new CenterExceptionHandler("该文件不支持预览");
    }
}

/**
 * 图片预览
 *
 * @param filePan
 * @param response
 */
private void previewImg(FilePan filePan, HttpServletResponse response) {
    if (StrUtil.isEmpty(filePan.getFileId())) {
        return;
    }
    // 源文件路径
    String realTargetFile = filePan.getFilePath();
    File file = new File(filePan.getFilePath());
    if (!file.exists()) {
        return;
    }
    readFile(response, realTargetFile);
}

/**
 * 视频预览
 *
 * @param filePan
 * @param response
 */
private void previewVideo(FilePan filePan, HttpServletResponse response) {
    // 根据文件名称创建对应的MD5文件夹
    String md5Dir = FileChunkUtil.createMd5Dir(filePan.getFilePath());
    // 去这个目录下查看是否有index.m3u8这个文件
    String m3u8Path = md5Dir + "/" + FileConstants.M3U8_NAME;
    if (!FileUtil.exist(m3u8Path)) {
        // 创建视频ts文件
        createVideoTs(filePan.getFilePath(), filePan.getFileId(), md5Dir, response);
    } else {
        // 读取切片文件
        readFile(response, m3u8Path);
    }
}

// 创建视频切片文件
private void createVideoTs(String videoPath, String fileId, String targetPath, HttpServletResponse response) {
    // 1.生成ts文件
    String video_2_TS = "ffmpeg -y -i %s -vcodec copy -acodec copy -bsf:v h264_mp4toannexb %s";
    String tsPath = targetPath + "/" + FileConstants.TS_NAME;
    String cmd = String.format(video_2_TS, videoPath, tsPath);
    ProcessUtils.executeCommand(cmd, false);

    // 2.创建切片文件
    String ts_chunk = "ffmpeg -i %s -c copy -map 0 -f segment -segment_list %s -segment_time 60 %s/%s_%%4d.ts";
    String m3u8Path = targetPath + "/" + FileConstants.M3U8_NAME;
    cmd = String.format(ts_chunk, tsPath, m3u8Path, targetPath, fileId);
    ProcessUtils.executeCommand(cmd, false);

    // 删除index.ts文件
    FileUtil.del(tsPath);

    // 读取切片文件
    readFile(response, m3u8Path);
}

// 加载视频切片文件
@Override
public void readFileTs(String tsFileId, HttpServletResponse response) {
    String[] tsArray = tsFileId.split("_");
    String videoFileId = tsArray[0];
    LambdaUpdateWrapper<FilePan> qw = new LambdaUpdateWrapper<>();
    qw.eq(FilePan::getFileId, videoFileId);
    FilePan one = this.getOne(qw);
    // 获取文件对应的MD5文件夹地址
    String md5Dir = FileChunkUtil.createMd5Dir(one.getFilePath());
    // 去MD5目录下读取ts分片文件
    String tsFile = md5Dir + "/" + tsFileId;
    readFile(response, tsFile);
}

用到的几个工具类代码

FileTypeUtil

package com.szx.usercenter.util;

/**
 * @author songzx
 * @create 2024-06-07 13:39
 */
public class FileTypeUtil {
    /**
     * 是否是图片类型的文件
     */
    public static boolean isImage(String fileName) {
        String[] imageSuffix = {"jpg", "jpeg", "png", "gif", "bmp", "webp"};
        String suffix = fileName.substring(fileName.lastIndexOf(".") + 1);
        for (String s : imageSuffix) {
            if (s.equals(suffix)) {
                return true;
            }
        }
        return false;
    }

    /**
     * 是否是视频文件
     */
    public static boolean isVideo(String fileName) {
        String[] videoSuffix = {"mp4", "avi", "rmvb", "mkv", "flv", "wmv"};
        String suffix = fileName.substring(fileName.lastIndexOf(".") + 1);
        for (String s : videoSuffix) {
            if (s.equals(suffix)) {
                return true;
            }
        }
        return false;
    }
}

FileChunkUtil

package com.szx.usercenter.util;

import cn.hutool.core.io.FileUtil;
import cn.hutool.crypto.digest.MD5;

import java.io.File;

/**
 * 文件上传后的各种处理操作
 * @author songzx
 * @create 2024-06-07 13:25
 */
public class FileChunkUtil {
    /**
     * 合并完文件后根据文件名称创建MD5目录
     * 用于存放文件缩略图
     */
    public static String createMd5Dir(String filePath) {
        File targetFile = new File(filePath);
        String md5Dir = MD5.create().digestHex(targetFile.getName());
        String targetDir = targetFile.getParent() + File.separator + md5Dir;
        FileUtil.mkdir(targetDir);
        return targetDir;
    }
}

readFile

/**
 * 读取文件方法
 *
 * @param response
 * @param filePath
 */
public static void readFile(HttpServletResponse response, String filePath) {
    OutputStream out = null;
    FileInputStream in = null;
    try {
        File file = new File(filePath);
        if (!file.exists()) {
            return;
        }
        in = new FileInputStream(file);
        byte[] byteData = new byte[1024];
        out = response.getOutputStream();
        int len = 0;
        while ((len = in.read(byteData)) != -1) {
            out.write(byteData, 0, len);
        }
        out.flush();
    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        if (out != null) {
            try {
                out.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        if (in != null) {
            try {
                in.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

ProcessUtils

这个方法用于执行CMD命令

package com.szx.usercenter.util;

import com.szx.usercenter.handle.CenterExceptionHandler;
import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;

/**
 * 可以执行命令行命令的工具
 *
 * @author songzx
 * @create 2024-06-06 8:56
 */
public class ProcessUtils {
  private static final Logger logger = LoggerFactory.getLogger(ProcessUtils.class);

  public static String executeCommand(String cmd, Boolean outPrintLog) {
    if (StringUtils.isEmpty(cmd)) {
      logger.error("--- 指令执行失败!---");
      return null;
    }

    Runtime runtime = Runtime.getRuntime();
    Process process = null;
    try {
      process = Runtime.getRuntime().exec(cmd);
      // 取出输出流
      PrintStream errorStream = new PrintStream(process.getErrorStream());
      PrintStream inputStream = new PrintStream(process.getInputStream());
      errorStream.start();
      inputStream.start();
      // 获取执行的命令信息
      process.waitFor();
      // 获取执行结果字符串
      String result = errorStream.stringBuffer.append(inputStream.stringBuffer + "\n").toString();
      // 输出执行的命令信息
      if (outPrintLog) {
        logger.info("执行命令:{},已执行完毕,执行结果:{}", cmd, result);
      } else {
        logger.info("执行命令:{},已执行完毕", cmd);
      }
      return result;
    } catch (Exception e) {
      e.printStackTrace();
      throw new CenterExceptionHandler("命令执行失败");
    } finally {
      if (null != process) {
        ProcessKiller processKiller = new ProcessKiller(process);
        runtime.addShutdownHook(processKiller);
      }
    }
  }

  private static class ProcessKiller extends Thread {
    private Process process;

    public ProcessKiller(Process process) {
      this.process = process;
    }

    @Override
    public void run() {
      this.process.destroy();
    }
  }

  static class PrintStream extends Thread {
    InputStream inputStream = null;
    BufferedReader bufferedReader = null;

    StringBuffer stringBuffer = new StringBuffer();

    public PrintStream(InputStream inputStream) {
      this.inputStream = inputStream;
    }

    @Override
    public void run() {
      try {
        if (null == inputStream) {
          return;
        }
        bufferedReader = new BufferedReader(new InputStreamReader(inputStream));
        String line = null;
        while ((line = bufferedReader.readLine()) != null) {
          stringBuffer.append(line);
        }
      } catch (Exception e) {
        logger.error("读取输入流出错了!错误信息:" + e.getMessage());
      } finally {
        try {
          if (null != bufferedReader) {
            bufferedReader.close();
          }
          if (null != inputStream) {
            inputStream.close();
          }
        } catch (IOException e) {
          logger.error("关闭流时出错!");
        }
      }
    }
  }
}

前端方法实现

前端使用的是React

定义图片预览组件 PreviewImage

import React, { forwardRef, useImperativeHandle } from 'react';
import {
  DownloadOutlined,
  UndoOutlined,
  RotateLeftOutlined,
  RotateRightOutlined,
  SwapOutlined,
  ZoomInOutlined,
  ZoomOutOutlined,
} from '@ant-design/icons';
import { Image, Space } from 'antd';

const PreviewImage: React.FC = forwardRef((props, ref) => {
  const [src, setSrc] = React.useState('');

  const showPreview = (fileId: string) => {
    setSrc(`/api/pan/preview/${fileId}`);
    document.getElementById('previewImage').click();
  };

  useImperativeHandle(ref, () => {
    return {
      showPreview,
    };
  });

  const onDownload = () => {
    fetch(src)
      .then((response) => response.blob())
      .then((blob) => {
        const url = URL.createObjectURL(new Blob([blob]));
        const link = document.createElement('a');
        link.href = url;
        link.download = 'image.png';
        document.body.appendChild(link);
        link.click();
        URL.revokeObjectURL(url);
        link.remove();
      });
  };

  return (
    <Image
      id={'previewImage'}
      style={{ display: 'none' }}
      src={src}
      preview={{
        toolbarRender: (
          _,
          {
            transform: { scale },
            actions: {
              onFlipY,
              onFlipX,
              onRotateLeft,
              onRotateRight,
              onZoomOut,
              onZoomIn,
              onReset,
            },
          },
        ) => (
          <Space size={12} className="toolbar-wrapper">
            <DownloadOutlined onClick={onDownload} />
            <SwapOutlined rotate={90} onClick={onFlipY} />
            <SwapOutlined onClick={onFlipX} />
            <RotateLeftOutlined onClick={onRotateLeft} />
            <RotateRightOutlined onClick={onRotateRight} />
            <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
            <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
            <UndoOutlined onClick={onReset} />
          </Space>
        ),
      }}
    />
  );
});

export default PreviewImage;

定义视频预览组件

视频预览用到了 dplayer ,安装

pnpm add dplayer hls.js
import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
import DPlayer from 'dplayer';
import './style/video-model.less';

const Hls = require('hls.js');

const PreviewVideo = forwardRef((props, ref) => {
  let dp = useRef();

  const [modal2Open, setModal2Open] = useState(false);
  const [fileId, setFileId] = useState('');

  const showPreview = (fileId) => {
    setFileId(fileId);
    setModal2Open(true);
  };

  const hideModal = () => {
    setModal2Open(false);
  };

  const clickModal = (e) => {
    if (e.target.dataset.tagName === 'parentBox') {
      hideModal();
    }
  };

  useEffect(() => {
    if (modal2Open) {
      console.log(fileId, 'videovideovideo');
      dp.current = new DPlayer({
        container: document.getElementById('video'), // 注意:这里一定要写div的dom
        lang: 'zh-cn',
        video: {
          url: `/api/pan/preview/${fileId}`, // 这里填写.m3u8视频连接
          type: 'customHls',
          customType: {
            customHls: function (video) {
              const hls = new Hls();
              hls.loadSource(video.src);
              hls.attachMedia(video);
            },
          },
        },
      });
      dp.current.play();
    }
  }, [modal2Open]);

  useImperativeHandle(ref, () => {
    return {
      showPreview,
    };
  });

  return (
    <>
      {modal2Open && (
        <div className={'video-box'} data-tag-name={'parentBox'} onClick={clickModal}>
          <div id="video"></div>
          <button className="ant-image-preview-close" onClick={hideModal}>
            <span role="img" aria-label="close" className="anticon anticon-close">
              <svg
                fill-rule="evenodd"
                viewBox="64 64 896 896"
                focusable="false"
                data-icon="close"
                width="1em"
                height="1em"
                fill="currentColor"
                aria-hidden="true"
              >
                <path d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"></path>
              </svg>
            </span>
          </button>
        </div>
      )}
    </>
  );
});

export default PreviewVideo;

父组件引入并使用

import PreviewImage from '@/components/Preview/PreviewImage';
import PreviewVideo from '@/components/Preview/PreviewVideo';

const previewRef = useRef();
const previewVideoRef = useRef();

// 点击的是文件
const clickFile = async (item) => {
    // 预览图片
    if (isImage(item.fileType)) {
        previewRef.current.showPreview(item.fileId);
        return;
    }

    // 预览视频
    if (isVideo(item.fileType)) {
        previewVideoRef.current.showPreview(item.fileId);
        return;
    }

    message.error('暂不支持预览该文件');
};

// 点击的文件夹
const clickFolder = (item) => {
    props.pushBread(item);  // 更新面包屑
};

// 点击某一行时触发
const clickRow = (item: { fileType?: string }) => {
    if (item.fileType) {
        clickFile(item);
    } else {
        clickFolder(item);
    }
};

<PreviewImage ref={previewRef} />
<PreviewVideo ref={previewVideoRef} />

判断文件类型的方法

// 判断文件是否为图片
export function isImage(fileType): boolean {
  const imageTypes = ['.jpg', '.png', '.jpeg', '.gif', '.bmp', '.webp']
  return imageTypes.includes(fileType);
}

// 判断是否为视频
export function isVideo(fileType): boolean {
  const videoTypes = ['.mp4', '.avi', '.rmvb', '.mkv', '.flv', '.wmv']
  return videoTypes.includes(fileType);
}

实现效果

图片预览效果

image-20240608121403097

视频预览效果

image-20240608121438971

并且在播放过程中是分段加载的视频

image-20240608121550836

查看源文件,根据文件名创建一个MD5的文件夹

image-20240608121012668

文件夹中对视频进行了分片处理,每一片都是以文件ID开头,方便加载分片时找到分片对应的位置

image-20240608121809812

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/692373.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【稳定检索/投稿优惠】2024年材料科学与能源工程国际会议(MSEE 2024)

2024 International Conference on Materials Science and Energy Engineering 2024年材料科学与能源工程国际会议 【会议信息】 会议简称&#xff1a;MSEE 2024大会地点&#xff1a;中国苏州会议官网&#xff1a;www.iacmsee.com会议邮箱&#xff1a;mseesub-paper.com审稿结…

【基于C++与OpenCV实现魔方图像识别和还原算法】施工总览图

文章目录 主要效果展示思维导图魔方还原算法 本系列博客长期更新&#xff0c;分为两大部分 OpenCV实现魔方六面识别 C编写科先巴二阶段还原算法实现三阶魔方的还原 主要效果展示 摄像头识别六面 3D图像构建&#xff0c;提供还原公式 动画演示还原过程 思维导图 魔方还原算法 参…

Java Web学习笔记26——Element常用组件

常见组件&#xff1a; 就是一个复制和粘贴的过程。 Table表格&#xff1a;用于展示多条结构类的数据&#xff0c;可对数据进行排序、筛选、对比或其他自定义操作。 常见组件-分页主键&#xff1a; Pagination&#xff1a;分页&#xff1a;当数据量比较多时&#xff0c;使用分…

sqlmap直接嗦 dnslog注入 sqllibs第8关

dnslog注入是解决注入的时候没有回显的情况&#xff0c;通过dns外带来进行得到我们想要的数据。 我们是用了dns解析的时候会留下记录&#xff0c;这时候就可以看见我们想要的内容。 这个时候我们还要了解unc路径以及一个函数load_file()以及concat来进行注入。看看我的笔记 unc…

atmel studio 无法通过printf打印浮点数到串口

择右侧的项目,右键,选择properties 系统把它优化了&#xff0c;所以删除&#xff0c;即可 然后&#xff0c;选择相应波特率&#xff0c;效验位&#xff0c;数据位是否正确&#xff0c;即可

Transformer 动画讲解:多层感知机

暑期实习基本结束了&#xff0c;校招即将开启。 不同以往的是&#xff0c;当前职场环境已不再是那个双向奔赴时代了。求职者在变多&#xff0c;HC 在变少&#xff0c;岗位要求还更高了。提前准备才是完全之策。 最近&#xff0c;我们又陆续整理了很多大厂的面试题&#xff0c…

Golang | Leetcode Golang题解之第138题随机链表的复制

题目&#xff1a; 题解&#xff1a; func copyRandomList(head *Node) *Node {if head nil {return nil}for node : head; node ! nil; node node.Next.Next {node.Next &Node{Val: node.Val, Next: node.Next}}for node : head; node ! nil; node node.Next.Next {if…

项目bug1

大项目测bug的时候让输入数字&#xff0c;如果不是则捕获异常&#xff0c;提示错误&#xff0c;几段很简单的代码&#xff1a; System.out.println("请输入要存入的金额"); Scanner sc new Scanner(System.in); while(true) {try {money sc.nextInt();break;} cat…

ctfshow-web入门-命令执行(web41_exp与分析)

过滤不严&#xff0c;命令执行 preg_match(/[0-9]|[a-z]|\^|\|\~|\$|\[|\]|\{|\}|\&|\-/i, $c) 过滤掉了数字、字母以及一些符号&#xff0c;之前接触过的无字母 rce 是取反编码再取反&#xff0c;采用不可见字符去绕过正则&#xff0c;但是这里取反符号被过滤掉了&#x…

mysql (事物)

一.什么是事物 事物是一组操作的集合&#xff0c;不可分割的工作单位&#xff0c;事物会把所有的操作当作一个整体一起向系统提交或撤销操作请求&#xff0c;就是这些操作要么一起成功要么一起失败。 二.事物操作 &#xff08;这个就是一个理解&#xff09; 1.事务特性 原子性…

java中的异常-异常处理(try、catch、finally、throw、throws)+自定义异常

一、概述 1、java程序员在编写程序时提前编写好对异常的处理程序&#xff0c;在程序发生异常时就可以执行预先设定好的处理程序&#xff0c;处理程序执行完之后&#xff0c;可以继续向后执行后面的程序 2、异常处理程序是在程序执行出现异常时才执行的 二、5个关键字 1、tr…

信息安全与密码技术概述

1. 信息安全的法律法规 2016年11月7日&#xff0c;中华人民共和国第十二届全国人民代表大会常务委员会第二十四次会议通过《中华人民共和国网络安全法》&#xff0c;自2017年6月1日起施行。 2019年10月26日&#xff0c;中华人民共和国第十三届全国人民代表大会常务委员会第十四…

C++ | Leetcode C++题解之第139题单词拆分

题目&#xff1a; 题解&#xff1a; class Solution { public:bool wordBreak(string s, vector<string>& wordDict) {auto wordDictSet unordered_set <string> ();for (auto word: wordDict) {wordDictSet.insert(word);}auto dp vector <bool> (s.…

高质量 HarmonyOS 权限管控流程

高质量 HarmonyOS 权限管控流程 在 HarmonyOS 应用开发过程中&#xff0c;往往会涉及到敏感数据和硬件资源的调动和访问&#xff0c;而这部分的调用就会涉及到管控这部分的知识和内容了。我们需要对它有所了解&#xff0c;才可以在应用开发中提高效率和避免踩坑。 权限管控了…

Django 表里做删除

先看效果图 点击 删除 按钮之后&#xff0c;就可以下面的效果 操作步骤&#xff1a; 1. 在 urls.py 文件里&#xff0c;添加路劲&#xff1a; urlpatterns [path(asset/<int:aid>/delete/, am_views.asset_delete),]2. 在 views.py 文件里&#xff0c;实现一个新的函…

RHEL8/Centos8 install for PXE

PXE介绍 PXE&#xff08;Preboot Execution Environment&#xff09;是预引导执行环境的缩写。它是由Intel设计的&#xff0c;允许客户端计算机通过网络从服务器上加载操作系统镜像。PXE通常用于大规模部署操作系统&#xff0c;例如在企业或学校环境中。 PXE工作流程如下&…

上位机快速开发框架

右上角向下按钮 -> 后台配置 系统菜单 角色管理 分配权限 用户管理 设备配置 通道管理 首页界面设计 设备1配置 带反馈按钮&#xff0c;如&#xff1a;用户按键00105&#xff0c;PLC反馈状态00106 设备2配置 参数说明&#xff1a; TagName_Main&#xff1a;主要信息&#…

mac读不出来ntfs mac硬盘读不出来盘

新买的Mac电脑由于需要导入旧电脑的数据&#xff0c;因此通常会读取备份硬盘&#xff0c;通过硬盘进行导入。不过由于各种原因&#xff0c;有些mac用户反馈无法正常读取或写入NTFS移动硬盘&#xff0c;下面就通过本篇教程&#xff0c;简单讲述当mac读不出来ntfs&#xff0c;mac…

二分+模拟,CF1461D - Divide and Summarize

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 Problem - 1461D - Codeforces 二、解题报告 1、思路分析 我们发现每次分裂操作结果都是固定的 我们从初始序列分裂出两个确定的子序列&#xff0c;两个确定的子序列又分裂出4个确定的子序列 那么也就是说…