在 Chrome 和 IE11 上流式传输可观看的 .mjpeg 视频

我在本地托管了一个 .mjpeg 文件http://127.0.0.1/web/Images/Stream/somevideo.mjpeg http://127.0.0.1/web/Images/Stream/somevideo.mjpeg

我在我的 cshtml 页面中尝试了一些代码。

1.视频标签法

    <video src="http://127.0.0.1/web/Images/Stream/somevideo.mjpeg" controls></video>

2.img标签方法

<img src="http://127.0.0.1/web/Images/Stream/somevideo.mjpeg"/>

3.motionjpeg JavaScript方法

下面的代码复制自here https://stackoverflow.com/questions/19346775/rendering-mjpeg-stream-in-html5/19370054#19370054

<img id="motionjpeg" src="http://127.0.0.1/web/Images/Stream/somevideo.mjpeg" />
<script>
        //Using jQuery for simplicity
        function motionjpeg(id) {
            var image = $(id), src;

            if (!image.length) return;

            src = image.attr("src");
            if (src.indexOf("?") < 0) {
                image.attr("src", src + "?"); // must have querystring
            }

            image.on("load", function() {
                // this cause the load event to be called "recursively"
                this.src = this.src.replace(/?[^\n]*$/, "?") +
                    (new Date()).getTime(); // 'this' refers to the image
            });
        }

        $(document).ready(function() {
            motionjpeg("#motionjpeg"); // Use the function on the image
        });
</script>

4.clipchamp javascript方法

唯一的code https://clipchamp.com/blog/2015/how-to-play-back-mjpeg-animated-gif-and-mp4-video-on-web-sites/有效，但仅适用于 Chrome，不适用于 IE

<div id="mjpeg_player" style="width:600px;"></div>
<script src='http://127.0.0.1/web/Scripts/jquery-clipchamp-mjpeg-player-plugin-master/src/jquery.clipchamp.mjpeg.player.js'></script>
<script>
        $(document).ready(function() {

            var mjpegUrl = "http://127.0.0.1/web/Images/Stream/somevideo.mjpeg";
            var fps = 20;
            var autoloop = true;

            $('#mjpeg_player').clipchamp_mjpeg_player(mjpegUrl, fps, autoloop,
                function(wrapperElement, playerInterface) {
                    /*
                    $('#mjpeg_player_stop').click(function(){
                        playerInterface.finish();
                    });
                    */
                });
        });
</script>

仅供参考，我将 .mpjeg 的 MIME 类型配置为 application/octet-stream

你有没有尝试过multipart/x-mixed-replace？ 您还必须提供边界参数，因此它看起来像这样：multipart/x-mixed-replace; boundary=--boundary您必须弄清楚托管 mjpeg 文件上使用哪个边界来分隔单独的帧内容。