mjpeg HTML5 video doesn't stream with <video>

Question

I'm trying to display mjpeg live stream in HTML 5

With <img> tag -> no problem it shows the stream great, but, I need some events to be fired to indicate when the stream is properly displayed

For example:

<img src="url" />

With <video> tag -> I'm able to get those events, but I'm not able to play mjpeg stream

For example:

<video autoplay="autoplay" controls onerror="onError()">
    <source src=url>
</video>

What can I do?

Answer 1

There is no general support for MJPEG streams in any browser beyond the img element. MJPEG has no official standard and there exist many variations which could be problematic with the video element as to how to detect what is an error without supporting every/most variations.

For the image element I guess a compromise has been made to allow for more tolerance format-wise at the cost of not being able to analyze the stream properly.

The closest we get to monitor events with the img element is to listen to the onload, onerror and onabort events. Beyond that we are given no option.

You could look into transcoding solutions such as the free VLC combined with MediaTomb (allow piping VLC output) that can convert the MJPEG format to a different one on the fly as a possible workaround. An alternative to that is to consider a Flash based solution.