0

I am currently using the asp mvc method and wondering if I can do read video in my local path using c# as my backend. Is there any suggested reference code how to get the videos. if ever that this possible I am thinking that create a c# code to get the video then use ajax to fetch it then pass to my html to display.

Any suggestion/comments TIA.

Temporary here is my working code but this time the video was loaded from project folder named "content" and my aim is to put the video e.g from my local drive C:

 <video id="video" controls preload="metadata" style="width:100%; height:100%">
        <source src="~/Content/Videos/main.mp4" type="video/mp4">
      @*<source src="C:/www/myProj.com/Content/Videos/main.mp4" type="video/mp4"> -----I want to read the video from this path   *@                   
  </video>
Syntax Rommel
  • 932
  • 2
  • 16
  • 40
  • See [Read local XML with JS](https://stackoverflow.com/questions/41279589/) – guest271314 Feb 12 '19 at 23:34
  • You can use `` to get local files. – guest271314 Feb 12 '19 at 23:39
  • I don't think that would solve my item. coz the user will access it to my local path just like plug and play or video link – Syntax Rommel Feb 12 '19 at 23:42
  • What do you mean by _"the user will access it to my local path"_? A user other than yourself? – guest271314 Feb 12 '19 at 23:44
  • just like client-server. the video will be place on local path from server then users will access it. – Syntax Rommel Feb 12 '19 at 23:46
  • Not following what the issue is. Are you trying to get and playback media on your own local disk? – guest271314 Feb 12 '19 at 23:46
  • yep! actually I have a setup code which is already working but this is using javascript and html only. I am using VS 2017 asp web app and for now I am putting the video to project folder named "content" then loads it to my html video source and its working fine. but if I put it e.g to my local drive C it was failed to load the video and this is my aim – Syntax Rommel Feb 12 '19 at 23:52
  • That is why suggested using `` to avoid CORS issues. [Jquery load() only working in firefox?](https://stackoverflow.com/questions/32996001/); [JS: how can I base64 encode a local file without XMLHttpRequest?](https://stackoverflow.com/questions/38887005/) – guest271314 Feb 12 '19 at 23:59
  • I updated my question please see changes. Could you gave a sample added code based from my question? – Syntax Rommel Feb 13 '19 at 00:05

1 Answers1

0

You can use <input type="file">, change event to select local files, and FileReader, URL.createObjectURL() to create a Blob URL pointing to the File object

const input = document.querySelector("input[type=file]");
const video = document.querySelector("video");
let url;

input.addEventListener("change", function(event) {
  const file = input.files[0];
  if (url) {
    URL.revokeObjectURL(url)
  }
  url = URL.createObjectURL(file);
  video.src = url;
})
<input type="file" accept="video/*">
<video controls></video>
guest271314
  • 1
  • 15
  • 104
  • 177
  • this great actually but the issue is every user will choose where the video path is located. Is it possible if no more option to choose and there is already path declared on:"C:/www/myProj.com/Content/Videos/main.mp4" and it will just automatically play – Syntax Rommel Feb 13 '19 at 00:32
  • `autoplay` policy of browsers have been recently changed [Autoplay Policy Changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes), though user action of clicking `Browse..` or `Choose file..` should allow playing of media once `src` is set. You can convert your local media to a [`data URL`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) locally using `FileReader.prototype.readAsDataURL()` and serve the HTML with the ` – guest271314 Feb 13 '19 at 00:45
  • I'm try to remove the input and put the hard coded path but I got multiple errors. Can you show it to me the working code. – Syntax Rommel Feb 13 '19 at 00:58
  • Not allowed to load local resource: file:///C:/video/local.mp4 – Syntax Rommel Feb 13 '19 at 01:01
  • @Rockn'Roll Have you read the linked questions and answers? Making a request from different protocols, for example, from a `document` having a `http:` or `https:` protocol to a `file:` protocol is a cross-origin request that is prevented by default in browsers. Consider a script that is allowed to request any resource from users' local filesystem without notifying the user. At Chromium/Chrome it should be possible to change preferences or policy to allow requesting files from `file:` protocol. To avoid having users change their preferences or policy you can use `` element. – guest271314 Feb 13 '19 at 01:03