流.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