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:
Post your comments / questions
Recent Article
- Requested setting INSTALLED_APPS, but settings are not configured. You must either define..
- ValueError:All arrays must be of the same length - Python
- Check hostname requires server hostname - SOLVED
- How to restrict access to the page Access only for logged user in Django
- Migration admin.0001_initial is applied before its dependency admin.0001_initial on database default
- Add or change a related_name argument to the definition for 'auth.User.groups' or 'DriverUser.groups'. -Django ERROR
- Addition of two numbers in django python
- The request was aborted: Could not create SSL/TLS secure channel -Error in Asp.net
Related Article