为了测试浏览器MSE的多媒体框架，搭建一个MSE服务会方便不少，这里记录下fragment mp4服务的搭建过程。

生成fragment mp4

为了方便，使用fragment mp4测试会更方便，所以这里要用到bento4工具。

下载安装bento4

Bento4是一个C++类库和工具，用于读取和写入ISO-MP4文件。除了支持ISO-MP4外，Bento4还支持解析和复用H.264和H.265 ES流，将ISO-MP4转换为MPEG2-TS，打包HLS和MPEG-DASH、CMAF、内容加密、解密等。

# http://zebulon.bok.net/Bento4/binaries/wget http://zebulon.bok.net/Bento4/binaries/Bento4-SDK-1-6-0-639.x86_64-unknown-linux.zip
unzip Bento4-SDK-1-6-0-639.x86_64-unknown-linux.zipcd Bento4-SDK-1-6-0-639.x86_64-unknown-linux/# 直接放到/usr目录下
sudo cp * /usr/. -rf

输入mp4，tab键补全，可以看到，可用的binary都能找到了：

$ mp4
mp42aac         mp42hevc        mp42ts          mp4dash         mp4dcfpackager
mp4dump         mp4encrypt      mp4fragment     mp4iframeindex  mp4mux
mp4split        mp42avc         mp42hls         mp4compact      mp4dashclone
mp4decrypt      mp4edit         mp4extract      mp4hls          mp4info
mp4rtphintinfo  mp4tag

转换mp4为fragment mp4

使用`mp4fragment`，将普通mp4转换为fragment mp4，不指定`--fragment-duration`，生成的fragment duration按default值:

$ mp4fragment video.mp4  fragmented-default.mp4
found regular I-frame interval: 1511 frames (at 29.970 frames per second)
auto-detected fragment duration too large, using default

指定fragment时长为2s：

mp4fragment --fragment-duration 2000 video.mp4 fragmented.mp4

通过mp4info查看生成的fragmented.mp4文件信息，这时候fragments字段已经变成yes：

$ mp4info fragmented.mp4
File:major brand:      isomminor version:    200compatible brand: isomcompatible brand: iso2compatible brand: avc1compatible brand: mp41compatible brand: iso5fast start:       yesMovie:duration:   97903 (media timescale units)duration:   97903 (ms)time scale: 1000fragments:  yes

fragment mp4分片

对fragment mp4进行分片:

$ mp4dash --output-dir 1080p fragmented.mp4
Parsing media file 1: fragmented.mp4
WARNING: video segment durations for "File 1#1" vary by more than 10% (consider using --use-segment-timeline)
Splitting media file (video) fragmented.mp4

分片完成后，如果没有指定output-dir参数，默认会生成output目录，在输出目录会生成stream.mpd文件，audio\video目录存放audio和video 分片文件,，进入到video目录，可以看到如下分片文件：

$ cd 1080p/video/avc1
$ ls
init.mp4    seg-11.m4s  seg-13.m4s  seg-15.m4s  seg-17.m4s  seg-19.m4s
seg-20.m4s  seg-22.m4s  seg-3.m4s  seg-5.m4s  seg-7.m4s  seg-9.m4s
seg-10.m4s  seg-12.m4s  seg-14.m4s  seg-16.m4s  seg-18.m4s  seg-1.m4s
seg-21.m4s  seg-2.m4s   seg-4.m4s  seg-6.m4s  seg-8.m4s

配置mse-demo

新建1080p.html文件，修改baseUrl，templateUrl字段，放到nginx服务的目录下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>MSE Demo</title>
</head>
<body><h1>MSE Demo</h1><div><video controls width="80%"></video></div><script type="text/javascript">(function() {var baseUrl = 'http://192.168.31.124/dash/1080p/video/avc1/';var initUrl = baseUrl + 'init.mp4';var templateUrl = baseUrl + 'seg-$Number$.m4s';var sourceBuffer;var index = 1;var numberOfChunks = 22;var video = document.querySelector('video');if (!window.MediaSource) {console.error('No Media Source API available');return;}var ms = new MediaSource();video.src = window.URL.createObjectURL(ms);ms.addEventListener('sourceopen', onMediaSourceOpen);function onMediaSourceOpen() {sourceBuffer = ms.addSourceBuffer('video/mp4; codecs="avc1.4d401f"');sourceBuffer.addEventListener('updateend', nextSegment);GET(initUrl, appendToBuffer);video.play();}function nextSegment() {var url = templateUrl.replace('$Number$', index);GET(url, appendToBuffer);index++;if (index > numberOfChunks) {sourceBuffer.removeEventListener('updateend', nextSegment);}}function appendToBuffer(videoChunk) {if (videoChunk) {sourceBuffer.appendBuffer(new Uint8Array(videoChunk));}}function GET(url, callback) {var xhr = new XMLHttpRequest();xhr.open('GET', url);xhr.responseType = 'arraybuffer';xhr.onload = function(e) {if (xhr.status != 200) {console.warn('Unexpected status code ' + xhr.status + ' for ' + url);return false;}callback(xhr.response);};xhr.send();}})();</script>
</body>
</html>

播放测试

$ google-chrome http://192.168.31.124/mse-demo/4k.html

当然，这个是直接通过MSE直接读取mp4实现的，直接适用dash服务也是可以的，vlc和gst-play直接可以播放mpd源。

ffplay http://192.168.31.124/dash/1080p/stream.mpdgst-play-1.0 http://192.168.31.124/dash/1080p/stream.mpdvlc http://192.168.31.124/dash/1080p/stream.mpd

ffmpeg可能没支持dash demuxer，如果没有，就需要自己编译，支持dash demuxer就可以。

https://github.com/hongszh/mse-demo

本地MSE播放fragment mp4服务相关推荐

高仿网易云音乐一（可扫描本地音乐播放）
最近闲下来做了个仿网易云音乐的音乐播放器效果图: 项目下载地址 https://github.com/PangHaHa12138/MusicPlayerdemo 闪屏扫描本地音乐播放仿探探仿 ...
mp4文件格式之fragment mp4
目前网络上对mp4文件格式的总结已经相当多了,我就不在这里抄别人总结的东西了,想入门的话百度一下会有许多这方面的文章.这里介绍一下其他文章中很少涉及的一种mp4文件结构,即fragment mp4,也 ...
msm8937+android7.1系统播放某个MP4文件在data分区下创建ramdump并生成很多elf文件问题
1. 问题描述设备用系统自带播放器播放某个MP4文件(15s左右的视频文件),有时候可以播放通过,有时候播放过程提示"无法播放此视频",播放2~3天左右,系统提示存储空间不 ...
iOS m3u8本地缓存播放(控制下载并发、暂停恢复)
一m3u8缓存播放的整个流程二控制媒体下载的并发数三控制单个媒体的切片下载并发数四下载的中断和恢复总结下任务生命周期中的任务状态变化五注意的问题与思路延伸一.m3u8缓存播放的整个流程 1 ...
我的音乐（Musicoco）- 本地音乐播放器开发总结
开源一个功能相对齐全的本地音乐播放器简述从五月末就开始利用空余时间开发这款 app ,不知不觉三个月过去了. App 名称:我的音乐,我给取了个别名:Musicoco. Android 手机本地音 ...
炫音乐可视化 html5 在线,HTML5打造的炫酷本地音乐播放器-喵喵Player
将之前捣腾的音乐频谱效果加上一个播放列表就成了现在的喵喵播放器(Meow meow Player,额知道这名字很二很装萌~),全HTML5打造的网页程序,可本地运行也可以挂服务器上用. 在线Demo及 ...
Andriod本地音乐播放器
实现本地音乐播放器(Client) 这个稍微简单点:全是Andriod知识. 学习链接:Andriod本地音乐播放的学习(这有讲课的大佬给的源码,需要自己去看视频自己去下载)(当然我的项目源码在后面, ...
Android实现网络音频或视频文件下载本地进行播放
/*** date:2021/5/12* author:wsm(admin)* funcation:文件下载工具类*/ public class DownloadUtil {private stati ...
安卓仿网易云界面的本地音乐播放器的实现
前言:读研究生之前,老板让学IOS,老老实实看了一个学期的IOS(在这里强烈安利一下腾讯课堂的小码哥IOS视频,基本刚开始只需要10块买第一部,后面的就可以用可视币来兑换了,质量还不错,能学到很多东西 ...

本地MSE播放fragment mp4服务