流媒体视频基础 MSE 入门 & FFmpeg 制作视频预览缩略图和 fmp4

const video = document.querySelector('video')const mediaSource = new MediaSource()

mediaSource.addEventListener('sourceopen', ({ target }) => {    URL.revokeObjectURL(video.src)    const mime = 'video/webm; codecs="vorbis, vp8"'
    const sourceBuffer = target.addSourceBuffer(mime) // target 就是 mediaSource
    fetch('/static/media/flower.webm')
        .then(response => response.arrayBuffer())
        .then(arrayBuffer => {
            sourceBuffer.addEventListener('updateend', () => {                if (!sourceBuffer.updating && target.readyState === 'open') {
                    target.endOfStream()
                    video.play()
                }
            })
            sourceBuffer.appendBuffer(arrayBuffer)
        })
})

video.src = URL.createObjectURL(mediaSource)

返回包含 MediaSource
 所有 SourceBuffer
 的 SourceBufferList
 对象

根据给定 MIME 类型创建一个新的 SourceBuffer 对象，将它追加到 MediaSource 的 SourceBuffers 列表中

是否支持指定的 mime 类型，返回 true
 表示可能支持并不能保证

readyState
 从 closed
 或 ended
 到 open

控制处理媒体片段序列，segments
 片段时间戳决定播放顺序，sequence
 添加顺序决定播放顺序，
在 MediaSource.addSourceBuffer()
 中设置初始值，如果媒体片段有时间戳设置为 segments
，否则 sequence
。
自己设置时只能从 segments
 设置为 sequence
，不能反过来。

添加媒体数据片段（ArrayBuffer
 或 ArrayBufferView
）到 SourceBuffer

updating
 从 false
 变为 true
 时

mp4fragment ./friday.mp4 ./friday.fmp4

packager stream_descriptor[,stream_descriptor] [flags]

packager in=friday.mp4 --dump_stream_info # 查看视频信息File "friday.mp4":Found 2 stream(s).Stream [0] type: Audio
 codec_string: mp4a.40.2 # 音频的编码器字符串
 time_scale: 44100
 duration: 271360 (6.2 seconds)
 is_encrypted: false
 codec: AAC
 sample_bits: 16
 num_channels: 2
 sampling_frequency: 44100
 language: undStream [1] type: Video
 codec_string: avc1.4d401e # 视频的编码器字符串
 time_scale: 3000
 duration: 18500 (6.2 seconds)
 is_encrypted: false
 codec: H264
 width: 640
 height: 480
 pixel_aspect_ratio: 1:1
 trick_play_factor: 0
 nalu_length_size: 4

ffmpeg -i ./friday.mp4 -movflags empty_moov+frag_keyframe+default_base_moof f.mp4

ffmpeg [global_options] {[input_file_options] -i input_url} ... {[output_file_options] output_url} ...

 _______              ______________
|       |            |              |
| input |  demuxer   | encoded data |   decoder
| file  | ---------> | packets      | -----+
|_______|            |______________|      |
                                           v
                                       _________
                                      |         |
                                      | decoded |
                                      | frames  |
                                      |_________|
 ________             ______________       |
|        |           |              |      |
| output | <-------- | encoded data | <----+
| file   |   muxer   | packets      |   encoder
|________|           |______________|

ffmpeg -i input.avi -c copy output.mp4

ffmpeg -y -i myvideo.mp4 -c:v copy -an myvideo_video.mp4
ffmpeg -y -i myvideo.mp4 -c:a copy -vn myvideo_audio.m4a

ffmpeg -help #查看帮助ffmpeg -i input.mp4 # 查看视频信息ffmpeg -formats # 查看支持的容器ffmpeg -codecs # 查看支持的编码格式ffmpeg -encoders # 查看内置的编码器

ffmpeg -i ./test.webm -vf 'fps=1/10:round=zero:start_time=-9,scale=160x90,tile=5x5' M%d.jpg

const thumb = document.querySelector('.thumb')const gapSec = 10 // 一张图片显示几秒const images = [...] // 图片const row = 5, col = 5 // 一张图有几行几列const width = 160, height = 90; // 缩略图的宽高const thumbQuantityPerImg = col * rowfunction updateThumbnail(seconds) { // 传入要显示缩略图的秒数
    const thumbNum = (seconds / gapSec) | 0; // 当前是第几张缩略图
    const url = images[(thumbNum / thumbQuantityPerImg) | 0];    const x = (thumbNum % col) * width; // x 的偏移量
    const y = ~~((thumbNum % thumbQuantityPerImg) / row) * height; // y 的偏移量

    thumb.style.backgroundImage = `url(${url})`;
    thumb.style.backgroundPosition = `-${x}px -${y}px`;
}

./audio/
  ├── ./128kbps/
  |     ├── segment0.mp4
  |     ├── segment1.mp4
  |     └── segment2.mp4
  └── ./320kbps/
        ├── segment0.mp4
        ├── segment1.mp4
        └── segment2.mp4
./video/
  ├── ./240p/
  |     ├── segment0.mp4
  |     ├── segment1.mp4
  |     └── segment2.mp4
  └── ./720p/
        ├── segment0.mp4
        ├── segment1.mp4
        └── segment2.mp4

ffmpeg -i ./friday.mp4 -f segment -segment_time 2 -segment_format_options movflags=dash ff%04d.mp4

window.MediaSource = window.MediaSource || window.WebKitMediaSourceconst video = document.querySelector('video')const mime = 'video/mp4; codecs="avc1.4d401e, mp4a.40.2"'const segments = [    '/static/media/ff0000.5b66d30e.mp4', 
    '/static/media/ff0001.89895c46.mp4', 
    '/static/media/ff0002.44cfe1e4.mp4']const segmentData = []let currentSegment = 0if ('MediaSource' in window && MediaSource.isTypeSupported(mime)) {    const ms = new MediaSource()
    video.src = URL.createObjectURL(ms)
    mediaSource.addEventListener('sourceopen', sourceOpen)
}function sourceOpen({ target }) {    URL.revokeObjectURL(video.src)
    target.removeEventListener('sourceopen', sourceOpen)    const sb = target.addSourceBuffer(mime)    fetchSegment(ab => sb.appendBuffer(ab))
    sb.addEventListener('updateend', () => {        if (!sb.updating && segmentData.length ) {
            sb.appendBuffer(segmentData.shift())
        }
    })
    video.addEventListener('timeupdate', function timeupdate() {        if (
            currentSegment > segments.length &&
            !sb.updating &&
            target.readyState === 'open'
        ) { // 所有片段全部加载完成
            target.endOfStream()
            video.removeEventListener('timeupdate', timeupdate)
        } else if (
            video.currentTime > (currentSegment * 2 * 0.8) 
            // 一个片段时长 2 秒
            // 在一个片段播放到 80% 的时候才去请求下一个片段
        ) {            fetchSegment(ab => {                if (sb.updating) {
                    segmentData.push(ab)
                } else {
                    sb.appendBuffer(ab)
                }
            })
        }
    })
    video.addEventListener('canplay', () => {
        video.play()
    })
}function fetchSegment(cb) {    fetch(segments[currentSegment])
        .then(response => response.arrayBuffer())
        .then(arrayBuffer => {
            currentSegment += 1
            cb(arrayBuffer)
        })
}