I have been asked to add a live stream video to an existing website. The stream URL is, say, http://192.168.1.2/, and I can view it in VLC. The container is MPEG-TS, and the codec shown by VLC is Codec: H264 - MPEG-4 AVC (part 10) (h264), and from what I read, this should be supported by all major browsers.
My current HTML code is simply this:
<video width="100%" height="auto" autoplay controls>
<source src="http://192.168.1.2/" type="video/mp4">
</video>
But this does not show anything. In both Chrome and Edge, I can see the video player with a spinning circle, and the F12 Network tab shows that some data is being downloaded from the stream (roughly 1 MB in 24 seconds, then it stops).
Firefox almost immediately shows a message No video with supported format and MIME type found, and downloads nothing. There is a warning in the console: HTTP “Content-Type” of “application/octet-stream” is not supported. Load of media resource http://192.168.1.2/ failed. The stream response does have that content-type header, but I'm not sure if that would prevent playing it. I assume that Firefox is more picky than Edge and Chrome.
My question is: Is it actually possible to show streaming video in a video element? And if not, is there an alternative? I tried to use fetch and assign the result to video.src, but the first step already fails because of CORS restrictions. However, if this is a feasible approach, I could ask the owner of the stream to add support for that.
Yes, you can show streaming video in a video element, provided you're using a separate javascript library to demux the incoming stream (Some examples are hls.js and flv.js ). Really only iOS devices support live streaming in a native <video> element by itself (HLS video).
You can sort out what kind of stream is incoming by using ffprobe or maybe by looking at the Content-Type of the http request you're making. application/octet-stream is a generic content type, so I wouldn't be certain you're actually grabbing the real content in that request.
Lastly, you'll likely be dealing with CORS/mixed-content issues for anything live streaming (unless you're loading a mjpeg stream...which you aren't if you've got H.264 video). You'll need to get that sorted out.