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: