在网页中嵌入 html5 音视频

前几天看见一篇使用 FFmpeg 的文章,就尝试了一下这款“转码瑞士军刀”。本文记录一下初次使用 FFmpeg 的过程,顺便把转码之后的音视频嵌进来看看结果。

安装 FFmpeg

首先是到官网下载 Windows Build Version,解压后添加 ffmpeg.exe 的路径到 环境变量path 中,打开 cmd,输入 ffmpeg -version 查看是否安装成功。

转码音视频

将要转码的音视频放到 C:\Users\××× 中,分别在 cmd 中输入以下命令(假设音频为 tao.mp3,视频为 man.mp4):

ffmpeg -i tao.mp3 -ab 64k output.mp3

ffmpeg -i tao.mp3 -f ogg -acodec libvorbis -ac 2 -ab 64k -ar 44100 output.ogg

ffmpeg -i man.mp4 -acodec libvorbis -ac 2 -ab 64k -ar 44100 -b 345k -s 640x360 output.webm

ffmpeg -i man.mp4 -strict -2 -c:a aac -b:a 64k -vcodec libx264 -vprofile high -preset slow -b:v 400k -maxrate 400k -bufsize 1000k -threads 0 -s 640x360 output.mp4

将媒体文件嵌入网页

此处使用了 html5media.js,使用

<video width="640" height="360" controls preload>
    <source src="clip.mp4"></source>
    <source src="clip.webm"></source>
</video>

嵌入结果

嵌入视频(右键选择播放)

嵌入音频


生前何必久睡,死后自会长眠

参考文章

文章作者
发布时间
分类
标签