流.mjpeg视频视图，能够在Chrome和IE11

我主持一个本地文件.mjpeg http://127.0.0.1/web/Images/Stream/somevideo.mjpeg 流.mjpeg视频视图，能够在Chrome和IE11

我想在我的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下面复制的代码

<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该作品，但是仅在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>

仅供参考，我配置的MIME类型.mpjeg作为应用程序/八位字节流

来源

2017-02-21 maryhadalittlelamb