Stream a video from blob JavaScript | HTML5 | Asp.net MVC

In this video tutorial I will show you how to stream a video from blob javascript in Html5 Video tag using asp.net mvc application.

 @Html.HiddenFor(model => Model.URL, new { id = "hiddenURL" })

    <video id="videoplayer1" style="width:100%; height:auto;" type='video/mp4' controls>

    </video>

<script type="text/javascript">



    var xhr = new XMLHttpRequest();

    xhr.open('GET', 'media/tree.mp4', true);



    window.onload = function () {

        var xhr = new XMLHttpRequest();

        var videopath = $("#hiddenURL").val();

        xhr.open('GET', videopath, true);

        xhr.responseType = 'blob';

        xhr.onload = function (e) {

            if (this.status == 200) {

                var blob = this.response;

                var videoplayer = document.getElementById("videoplayer1");

                display(blob, videoplayer);

            }

        };

        xhr.send();

    }



    function display(videoFile, videoEl) {



        if (!(videoFile instanceof Blob)) throw new Error('`videoFile` must be a Blob or File object.');

        if (!(videoEl instanceof HTMLVideoElement)) throw new Error('`videoEl` must be a <video> element.');



        debugger;

        const newObjectUrl = URL.createObjectURL(videoFile);



        const oldObjectUrl = videoEl.currentSrc;

        if (oldObjectUrl && oldObjectUrl.startsWith('blob:')) {



            videoEl.src = '';

            URL.revokeObjectURL(oldObjectUrl);

        }

        videoEl.src = newObjectUrl;

        videoEl.load();



    }



</script>

VIDEO GUIDE: