官网前端首屏需要播放一个视频,起初前端人员直接使用MP4 文件进行加载,一个视频40M ,每次进入会有较长一段时间白屏。后边讨论后分段加载视频,将视频切割成m3u8 形式,进行流媒体播放。
切分视频 要将MP4视频转换为M3U8格式,你需要使用一些专门处理视频的库,比如ffmpeg(这是一个广泛使用的命令行工具)以及Python包装器如moviepy或者直接调用subprocess来调用ffmpeg命令,或者有一些现成的在线工具。
自己使用FFmpeg 命令去转换,无论怎么操作,都达不到预期效果,远不如在线工具,不知道是使用姿势不对的问题?
视频转换后生成如下格式的内容
M3U8是一种播放列表文件格式,常用于HTTP Live Streaming(HLS),它允许视频流在不同的质量级别进行分段播放,非常适合网络视频流传输。
在线工具 MP4.to|https://www.mp4.to/m3u8/?lang=zh
FFmpeg 客户端命令直接处理 如果没有设置环境变量,那么只能在系统目录执行
Windows 安装
传统安装
下载并安装FFmpeg :
添加FFmpeg路径到环境变量 :
在Windows上,右键点击“此电脑”或“我的电脑” > “属性” > “高级系统设置” > “环境变量”。
在“系统变量”区域找到名为Path
的变量,选择“编辑”。
点击“新建”,然后将FFmpeg的bin
目录路径粘贴进去(例如,C:\ffmpeg\bin
),确定并关闭所有对话框。
验证FFmpeg安装 :
打开一个新的命令提示符窗口(注意,如果之前已经有一个命令提示符窗口打开,需要重新打开才能识别新的环境变量设置),输入ffmpeg
并回车。
如果看到FFmpeg的帮助信息,说明安装和配置成功。
命令行安装
参考文章
Ubuntu 安装
在Ubuntu上安装FFmpeg,您可以使用APT包管理器,这是最直接且常用的方法。以下是安装步骤:
更新软件包列表 : 打开终端(快捷键Ctrl+Alt+T),首先更新您的系统软件包列表,输入以下命令并按Enter键:
安装FFmpeg : 接下来,使用APT安装FFmpeg。输入以下命令并按Enter键:
如果系统提示您确认安装,按Y
键后按Enter键继续。
验证安装 : 安装完成后,您可以验证FFmpeg是否安装成功,通过在终端输入:
如果安装成功,此命令将显示FFmpeg的版本信息。
命令行模式
1 2 3 ffmpeg -i origin.mp4 -c:v copy -c:a copy -segment_time 10 -f segment split %03d.mp4 ffmpeg -i C:\Users\Desktop\homeBG\homeBg.mp4 -profile:v baseline -level 3.0 -s 1920x1080 -start_number 0 -hls_time 1 -hls_list_size 0 -f hls C:\Users\Desktop\homeBG\m3u82\index.m3u8
Python 脚本处理 以下是一个使用Python和subprocess模块调用FFmpeg命令来实现MP4转M3U8的基本示例。请确保你已经安装了FFmpeg并在系统PATH中可以被访问到。
使用 subprocess
查看代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 """ 需要本地也全局安装ffmpeg 工具 """ import subprocessdef mp4_to_m3u8 (input_mp4, output_dir ): """ 将MP4视频转换为M3U8格式。 :param input_mp4: 输入的MP4文件路径 :param output_dir: 输出目录,M3U8文件和切片将保存在此目录下 """ output_basename = input_mp4.split('/' )[-1 ].split('.' )[0 ] output_m3u8 = f"{output_dir} /{output_basename} .m3u8" output_ts = f"{output_dir} /{output_basename} %d.ts" cmd = [ "ffmpeg" , "-i" , input_mp4, "-profile:v" , "baseline" , "-level" , "3.0" , "-s" , "640x360" , "-start_number" , "0" , "-hls_time" , "10" , "-hls_list_size" , "0" , "-f" , "hls" , output_ts ] try : subprocess.run(cmd, check=True ) print (f"转换完成,M3U8文件已生成:{output_m3u8} " ) except subprocess.CalledProcessError as e: print (f"转换失败:{e} " ) input_mp4_path = "\mp4\homeBg.mp4" output_directory = "\m3u8\homeBg.m3u8" mp4_to_m3u8(input_mp4_path, output_directory)
使用ffmpeg-python
ffmpeg-python 是一个Python库,它提供了简单的接口来使用FFmpeg,使得在Python脚本中处理视频和音频文件变得更加直接和便捷。相比于直接使用 subprocess 调用FFmpeg命令,ffmpeg-python 提供了更Pythonic的语法,让操作更加直观。不过,请注意,ffmpeg-python 是FFmpeg的一个封装,因此在使用前确保你的系统中已经安装了FFmpeg。
查看代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 """ 安装依赖 pip install ffmpeg-python """ from ffmpeg import ( FFmpeg, Input, Output ) def mp4_to_m3u8 (input_file, output_folder ): output_name = input_file.stem output_m3u8 = f"{output_folder} /{output_name} .m3u8" output_ts = f"{output_folder} /{output_name} _%03d.ts" ( FFmpeg() .input (Input(input_file)) .output( Output(output_ts, format ='hls' , hls_time=10 , hls_list_size=0 ), map_metadata=0 , movflags='+faststart' , codec:v='libx264' , profile:v='baseline' , level=3.0 , b:v='1000k' , maxrate='1000k' , bufsize='1835k' , s='1920x1080' ) .global_args('-loglevel' , 'error' ) .overwrite_output() .run() ) return output_m3u8 input_mp4_path = "path/to/your/input.mp4" output_directory = "path/to/output/directory" m3u8_playlist = mp4_to_m3u8(input_mp4_path, output_directory) print (f"M3U8 playlist created at: {m3u8_playlist} " )
如果报错
1 2 3 4 5 6 7 8 9 10 11 12 13 PS E:\python\python_demo\aiwen\m3u8> & D:/devsoft/python3/python.exe e:/python/python_demo/aiwen/m3u8/myffmpeg.py Traceback (most recent call last): File "e:\python\python_demo\aiwen\m3u8\myffmpeg.py" , line 40, in <module> mp4_to_m3u8(input_mp4_path, output_directory) File "e:\python\python_demo\aiwen\m3u8\myffmpeg.py" , line 32, in mp4_to_m3u8 subprocess.run(cmd, check=True) File "D:\devsoft\python3\lib\subprocess.py" , line 505, in run with Popen(*popenargs, **kwargs) as process: File "D:\devsoft\python3\lib\subprocess.py" , line 951, in __init__ self._execute_child(args, executable, preexec_fn, close_fds, File "D:\devsoft\python3\lib\subprocess.py" , line 1420, in _execute_child hp, ht, pid, tid = _winapi.CreateProcess(executable, args, FileNotFoundError: [WinError 2] 系统找不到指定的文件。
这个错误提示表明Python在尝试运行FFmpeg命令时找不到ffmpeg可执行文件,这意味着要么FFmpeg没有安装在你的系统上,要么其路径没有被添加到系统的环境变量中,导致Python的subprocess模块无法直接调用它。
前端播放视频 查看代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" > <meta name ="viewport" content ="width=device-width, initial-scale=1.0" > <meta http-equiv ="X-UA-Compatible" content ="ie=edge" > <title > PC HLS video</title > <link href ="http://cdn.bootcss.com/video.js/6.0.0-RC.5/alt/video-js-cdn.min.css" rel ="stylesheet" > </head > <body > <video id ="hls-video" width ="300" height ="200" class ="video-js vjs-default-skin" playsinline webkit-playsinline autoplay controls preload ="auto" muted ="muted" x-webkit-airplay ="true" x5-video-player-fullscreen ="true" x5-video-player-typ ="h5" > <source src ="https://www.xxxxxx.com/video/homeBg/homebg.m3u8" type ="application/x-mpegURL" > </video > <script src ="http://cdn.bootcss.com/video.js/6.0.0-RC.5/video.js" > </script > <script src ="http://cdn.bootcss.com/videojs-contrib-hls/5.3.3/videojs-contrib-hls.js" > </script > <script > var player = videojs ('hls-video' ); player.play (); </script > </body > </html >
参考文章