如何将MJPEG流以视频而非图片形式播放并获取控制功能？

首先得搞明白为啥直接用<video>加载ffserver的MJPEG流不行：默认情况下，ffserver输出的MJPEG流是多部分替换流（multipart/x-mixed-replace），这种格式是给<img>标签设计的动态图片更新逻辑，而<video>标签需要的是符合视频流规范的MJPEG输出格式。

下面分两步搞定这个问题：

1. 调整ffserver配置，输出适配<video>的MJPEG流 #

打开你的ffserver配置文件（一般是ffserver.conf），找到对应直播流的<Stream>配置块，修改或补充以下内容：

<Stream live.mjpg>
    Feed feed1.ffm
    Format mjpeg
    VideoCodec mjpeg
    VideoFrameRate 25
    VideoBitRate 512
    VideoSize 640x480
    AVOptionVideo flags +global_header
    # 关键设置：把Content-Type改成视频流格式，让浏览器识别为视频
    ContentType video/x-mjpeg
</Stream>

核心是将ContentType从默认的图片流格式改成video/x-mjpeg，这样<video>标签才能正确识别它为视频流而非动态图片。修改完后重启ffserver让配置生效。

2. 前端用<video>标签加载流 #

现在就可以用<video>标签来加载流了，记得加上controls属性调出播放控制按钮，同时为了绕过Chrome的自动播放限制，建议搭配muted和autoplay（如果需要自动播放的话）：

<video 
    src="http://localhost:8090/live.mjpg" 
    controls 
    muted 
    autoplay
    width="640"
    height="480"
></video>

• controls：强制显示浏览器自带的播放控制栏（包含播放、暂停、音量调节等按钮）
• muted：Chrome要求媒体自动播放时必须静音，加这个属性可以让视频自动启动（不需要自动播放的话可以删掉autoplay）
• 可以根据你的流分辨率调整width和height参数

如果调整配置后还是有问题，你可以试试把ContentType改成video/x-mpeg，或者查看ffserver的日志排查编码参数是否正确。要是不想改服务器配置，也可以用JavaScript手动解析MJPEG帧并渲染到<video>，但这种方法复杂度高，不如调整ffserver配置来得直接。

内容的提问来源于stack exchange，提问作者greenoldman