Потоковое видео .mjpeg с возможностью просмотра как в Chrome, так и в 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" controls></video>

Показано в IE

<сильный>2. метод тега img

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

Показано в IE

<сильный>3. JavaScript-метод motionjpeg

Код ниже скопирован из здесь

<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. JavaScript-метод clipchamp

Единственный код, который работает, но только в 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 как application/octet-stream


person maryhadalittlelamb    schedule 21.02.2017    source источник
comment
привет, ты решил проблему наконец? Я стою перед той же проблемой...   -  person Kuba    schedule 04.11.2018


Ответы (2)


Возможно, правильный тип mime для M-JPEG, т.е. Motion JPEG,

video/x-motion-jpeg
person scaisEdge    schedule 21.02.2017
comment
Спасибо за ответ. Я пробовал приложение/октет-поток видео/x-motion-jpeg видео/mpeg видео/mp4 Ни один из них не работал. - person maryhadalittlelamb; 21.02.2017

Вы пробовали multipart/x-mixed-replace ? Вам также нужно будет указать параметр границы, чтобы он выглядел примерно так: multipart/x-mixed-replace; boundary=--boundary вам нужно будет выяснить, какая граница используется в вашем размещенном файле mjpeg для разграничения содержимого отдельного кадра.

person V.Kyrychenko    schedule 05.12.2017