当前位置: 欣欣网 > 码农

超级火爆的前端视频方案 FFmpeg ,带你体验一下~

2024-04-27码农

模拟面试、简历指导、入职指导、项目指导、答疑解惑可私信找我~已帮助100+名同学完成改造!

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~

FFmpeg

FFmpeg 是一个 开源的、跨平台的多媒体框架,它可以用来录制、转换和流式传输音频和视频。它包括了一系列的库和工具,用于处理多媒体内容,比如 libavcodec(一个编解码库),libavformat(一个音视频容器格式库),libavutil(一个实用库),以及 ffmpeg 命令行工具本身。

FFmpeg 被广泛用于各种应用中,包括视频转换、视频编辑、视频压缩、直播流处理等。它支持多种音视频编解码器和容器格式,因此能够处理几乎所有类型的音视频文件。由于其功能强大和灵活性,FFmpeg 成为了许多视频相关软件和服务的底层技术基础。

很多网页都是用 FFmpeg 来进行视频切片,比如一个视频很大,如果通过一个连接去请求整个视频的话,那势必会导致加载时间过长,严重阻碍了用户观感

所以很多视频网站都会通过视频切片的方式来优化用户观感,就是一部分一部分地去加载出来,这样有利于用户的体验

安装 FFmpeg

安装包下载

首先到 ffmpeg 的安装网页:https://www.gyan.dev/ffmpeg/builds/

下载解压后将文件夹改名为 ffmpeg

环境变量配置

环境变量配置是为了能在电脑上使用 ffmpeg 命令行

体验 FFmpeg

先准备一个视频,比如我准备了一个视频,总共 300 多 M

视频切片

并在当前的目录下输入以下的命令

 ffmpeg -i jhys.mkv 
 -c:v libx264 
 -c:a aac 
 -hls_time 60 
 -hls_segment_type mpegts 
 -hls_list_size 0 
 -f hls 
 -max_muxing_queue_size 1024 
 output.m3u8

接着 ffmpeg 会帮你将这个视频进行分片

直到切片步骤执行完毕,我们可以看到视频已经别切成几个片了

在这个命令中:

  • -i input_video.mp4 指定了输入视频文件。

  • -c:v libx264 -c:a aac 指定了视频和音频的编解码器。

  • -hls_time 10 指定了每个 M3U8 片段的时长,单位为秒。在这里,每个片段的时长设置为 10 秒。

  • -hls_segment_type mpegts 指定了 M3U8 片段的类型为 MPEG-TS。

  • -hls_list_size 0 设置 M3U8 文件中包含的最大片段数。这里设置为 0 表示没有限制。

  • -f hls 指定了输出格式为 HLS。

  • -max_muxing_queue_size 1024 设置了最大复用队列大小,以确保输出不会超过指定大小。

  • 最后输出的文件为 output.m3u8

  • 视频播放

    创建一个简单的前端项目

    可以看到浏览器会加载所有的视频切片

    结语

    我是林三心

  • 一个待过 小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司 的作死型前端选手;

  • 一个偏前端的全干工程师;

  • 一个不正经的掘金作者;

  • 逗比的B站up主;

  • 不帅的小红书博主;

  • 喜欢打铁的篮球菜鸟;

  • 喜欢历史的乏味少年;

  • 喜欢rap的五音不全弱鸡如果你想一起学习前端,一起摸鱼,一起研究简历优化,一起研究面试进步,一起交流历史音乐篮球rap,可以来俺的摸鱼学习群哈哈,点这个,有7000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点

  • 广州的兄弟可以约饭哦,或者约球~我负责打铁,你负责进球,谢谢~