流媒体.mjpeg视频浏览 - 可以在Chrome和IE11上使用 [英] Stream .mjpeg video view-able on both Chrome and IE11

问题描述

我在本地托管了.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控制项>< / video> 
  

2。 img tag method

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

3。 motionjpeg javascript method

下面的代码从 here

 < img id =motionjpegsrc =http ：//127.0.0.1/web/Images/Stream/somevideo.mjpeg/> 
< script> 
 //简单使用jQuery 
函数motionjpeg（id）{
 var image = $（id），src; 
 
 if（！image.length）return; 
 
 src = image.attr（src）; 
 if（src.indexOf（？）< 0）{
 image.attr（src，src +？）; //必须有查询字符串
 
 $ b $ image.on（load，function（）{
 //这导致load事件被递归地调用
 this.src = this.src.replace（/？[^ \\\
] * $ /，？）+ 
（new Date（））。getTime（）; //'this'指图片
}）; 
 
 $ b $（document）.ready（function（）{
 motionjpeg（＃motionjpeg）; //使用图像
}中的函数） ; 
< / script> 
  

4。 clipchamp JavaScript方法

唯一的 code ，但只适用于Chrome而非IE

 < div id =mjpeg_playerstyle =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> 
 $（document）.ready（function（）{
 
 var mjpegUrl =http://127.0.0.1/web/Images/Stream/somevideo.mjpeg; 
 VAR FPS = 20; 
变种自动循环=真; 
 
 $（ '＃mjpeg_player'）clipchamp_mjpeg_player（mjpegUrl，FPS，自动循环，
功能（wrapperElement，playerInterface）{$。 b $ b / * 
 $（'＃mjpeg_player_stop'）。click（function（）{
 playerInterface.finish（）; 
}）; 
 * / 
 }）; 
}）; 
< / script> 
  

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

解决方案

您是否试过 multipart / x-mixed-replace ？
您还必须提供边界参数，以便它看起来像这样： multipart / x-mixed-replace; border = - boundary 你必须找出你的托管mjpeg文件使用哪个边界来分隔单独的帧内容。

I hosted a .mjpeg file locally http://127.0.0.1/web/Images/Stream/somevideo.mjpeg

I tried a few codes in my cshtml page.

1. Video tag method

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

2. img tag method

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

3. motionjpeg javascript method

The code below copied from here

<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 method

The only code that works, however only on Chrome but not 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>

FYI, I configured the MIME type of .mpjeg as application/octet-stream

解决方案

Have you tried multipart/x-mixed-replace ? You will also have to provide boundary parameter so it will look something like this: multipart/x-mixed-replace; boundary=--boundary you will have to figure out which boundary is used on your hosted mjpeg file to delimit separate frame contents.

这篇关于流媒体.mjpeg视频浏览 - 可以在Chrome和IE11上使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！