How to Watch a Video from Local Storage in Angular

I am currently developing a small Angular application that allows users to view a collection of videos saved locally. The goal is for users to be able to save this collection in order to revisit these videos at a later time. The paths of the videos are stored in a JSON file, so I only have access to the string path format like this:

C:\My Videos\UploadedVideo.mp4

However, when I pass this path to the src attribute of a video HTML element, the video does not play. I have come across workarounds where an input element is used to pass the file to the video element, but this approach doesn't suit my situation as I already have the file path and do not want the user to repeatedly select the videos.

Answer №1

Your browser does not allow you to access your system path.

You have two choices:

Upload your videos to the Assets folder in Angular
Host your video online
(for example: create a Bucket on Amazon S3 for these files and access them through the bucket link).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering a 404 error in Angular 9 when refreshing the browser

Encountering a 404 error when attempting to access mysite.com/menu directly, but no issues when navigating through the homepage and selecting the menu option. Tried implementing an .htaccess file following Angular documentation, yet problem persists. Cur ...

angular vps

The functionality of Vue slot-scope seems to be restricted when used within nested child components

Here is the component configuration being discussed: Vue.component('myComponent', { data () { return { msg: 'Hello', } }, template: ` <div class="my-component"> <slot :ms ...

javascript vue.js

The attribute specified is not present on the element within the array

I'm attempting to create an array that includes an object with initialized properties and a number. Yet, I encounter this error message: The error states: 'Property 'foo' does not exist on type 'number | IObj'. The proper ...

typescript

What is the best way to transform a standard select input into a React select with multiple options?

Is it possible to transform a regular select dropdown into a multiple select dropdown in React, similar to the one shown in this image? I'm currently using the map method for my select options. https://i.stack.imgur.com/vJbJG.jpg Below is the code s ...

javascript reactjs

Exploring the forEach() and Apply() functions for processing two-dimensional arrays in JavaScript

I'm facing a challenge with handling an array consisting of arrays, each containing three elements. My goal is to execute the function calcMe(a,b,c){...} for every element in my main array using the forEach() method. However, I find myself stuck and u ...

javascript arrays multidimensional-array foreach

Resolving the Table Issue with 'onclick' in Javascript

Apologies for the lack of creativity in the title, I struggled to come up with something fitting. Currently, I am engaged in the development of a user-friendly WYSIWYG site builder. However, I have encountered an obstacle along the way. I've devised ...

javascript html css

Efficiently Encoding Still Image Data for NextJS

Currently, I am experimenting with a completely static method in my new Next.js v12 project. I am creating 5-6 data files to use with getStaticProps. Here is an example of one of the data file structures (they are all similar): import SqAshland1 from &apos ...

javascript node.js json image-processing next.js

What is the format required for specifying the end date and start date when using

Implementing the bootstrap datepicker. The Documentation doesn't specify the expected format for setEndDate or setStartDate. It refers to endDate option, which also lacks details on the required format. I want to set endDate and newDate based on a s ...

javascript bootstrap-datepicker

New data row successfully added to HTML table, revealing an object display

When I click a button, a dialog box opens up. I can fill out the form inside the dialog box and submit it to insert a row into a table. After submitting the form, the newly inserted row displays as [object Object] immediately after submission: https://i.s ...

javascript php html jquery

Error: The script is unable to access the property "div" because it is undefined

I keep encountering this issue "Cannot read property 'div' of undefined" This is the snippet in question function validateData(){ for(let j = 0; j < 13; j++){ if(dataArr[j].data.textContent === resultSet[j].result.div. ...

javascript function if-statement

JavaScript array loading failed for the C# web service

I am encountering an issue with a JavaScript object in my application that contains an array object, which is a collection of objects with two properties (Name, Value) on the server-side. Despite my efforts, when the code reaches the C# web service, the C ...

javascript c#arrays angularjs asp.net-web-api2

Unable to generate new entries with HTML Form

I've been working on creating a simple form with the ability to add new seasons or entries that will be posted to a database, but I've hit a roadblock. Whenever I try to run it, the "Add more Episodes" buttons for new seasons don't seem to w ...

javascript php html mysql

What is the best way to ensure synchronous function execution in Angular?

Consider the following scenario: ServiceA is accessed by two components with inputs. ComponentA contains a textArea while ComponentB has a toggle button. Whenever these components are changed, ServiceA.save() is triggered, which subsequently makes an HTTP ...

javascript angular function async-await

Ways to create a back-and-forth transition across a sequence

Is it possible to create an animation that changes the width of an element once, then reverts back after a pause? I want this transition to occur over a three-second interval followed by a two-second delay. How can I achieve this? Below is the code I have ...

javascript jquery css transition

TypeScripter Q&A