视频秒开操作指南

背景

视频文件由于体积较大在弱网情况打开缓慢，对营销效果有很强的负面效果，为了解决此问题，对此进行调研，最终基于 HTTP Live Streaming 通过 ffmpeg 将视频分割为多份以达到视频秒开的效果。

备注：实际使用 ios 首次加载效果拔群，Android 差距不大甚至有可能用 mp4 更快些。注意：只能在移动端使用，PC不成。

原理简析

通过 ffmpeg 将一个视频切割成多个 xx.ts 片段视频文件和一个 xx.m3u8 索引文件 ,video 标签 src 指向索引文件 <video><source src="xxx.m3u8" /></video> 充分利用网络以达到视频秒开。

工具：ffmpeg

直接下载安装包网络不好可以选择此方式。

命令行安装：brew install ffmpeg

命令简析：

ffmpeg {1} {2} -i {3} {4} {5}

全局参数
输入文件参数
输入文件
输出文件参数
输出文件

切片命令例子：

$ ffmpeg -i v.mp4 -c:v libx264 -hls_time 10 -hls_list_size 0 -c:a aac -strict -2 -f hls xx/vs.m3u8

参数对应关系：

3 v.mp4
4 -c:v libx264 -hls_time 10 -hls_list_size 0 -c:a aac -strict -2 -f hls
5 xx/vs.m3u8

命令行看起来很不友好?可以通过 github.com/fe-go/fe-cl… 调用:

例子： fe hls xxx.mp4 outdir

node sdk 调用（前提本机要安装 ffmpeg）

const ffmpeg = require('fluent-ffmpeg')
const path = require('path')
// https://github.com/fluent-ffmpeg/node-fluent-ffmpeg/blob/master/examples/livertmp2hls.js
// make sure you set the correct path to your video file
var proc = ffmpeg(path.join(__dirname, 'dist', 'v.mp4'), { timeout: 432000 })
    // set video bitrate
    .videoBitrate(1024)
    // set h264 preset
    // .addOption('preset', 'superfast')
    // set target codec
    .videoCodec('libx264')
    // set audio bitrate
    // .audioBitrate('128k')
    // set audio codec
    // .audioCodec('libfaac')
    // set number of audio channels
    .audioChannels(2)
    // set hls segments time
    .addOption('-hls_time', 10)
    // include all the segments in the list
    .addOption('-hls_list_size', 0)
    .on('progress', function(progress) {
        console.log('f ' + progress.percent + '%')
    })
    // setup event handlers
    .on('end', function() {
        console.log('file has been converted succesfully')
        process.exit(1)
    })
    .on('error', function(err) {
        console.log('an error happened: ' + err.message)
    })
    // save to file
    .save(path.resolve(__dirname, 'dist', 't', 'vs.m3u8'))

html 中引用方式

        <video>   
            <source src="xxx.m3u8" />
            <!-- <source src="xxx.mp4" /> -->
        </video>