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
- Fix-Gradient effect turning to gray in after effects
- How to blur an image in python?
- ModuleNotFoundError: No module named 'whois' in Python GoviralHost Without Terminal
- How to Convert Image to Pencil Sketch in Python?
- AttributeError: module 'urllib' has no attribute 'request' - Python
- How to Extract audio from video files using python?
- PermissionError: [Errno 13] Permission denied: 'shampoo_sales.csv' - Python
- [WinError 145] The directory is not empty: 'FolderPath' - Python
Related Article