Before I upload a video file, I need to determine the duration of the video. How can I gather this information?
I am currently utilizing Angular 11.0.9
async upload(event: any){
this.currentFile = event.target.files[0];
// Upload Logic
}
Before I upload a video file, I need to determine the duration of the video. How can I gather this information?
I am currently utilizing Angular 11.0.9
async upload(event: any){
this.currentFile = event.target.files[0];
// Upload Logic
}
Give this a try
<input type="file" (change)="fileTake($event)" />
<video width="400" id="video_here" controls>
<source crossorigin />
Your browser does not support HTML5 video.
</video>
on .ts file
fileTake(event) {
var fileUrl = window.URL.createObjectURL(event.target.files[0]);
document.getElementById("video_here").setAttribute("src", fileUrl);
setTimeout(() => {
var myvid = document.getElementById("video_here");
console.log(myvid["duration"]);
}, 2500);
}
Give It a Shot
fetchDuration(event) { const length = event.target.duration;}OR
document.querySelector("yourElementID").duration
Hi there, I'm encountering an issue with the code snippet below. It keeps throwing an error message that says "Property 'weatherData' does not exist on type 'XMLHttpRequest'." The purpose of this code is to display weather informat ...
After successfully implementing the http.get call and retrieving data from the request, I encountered an issue: this.http.get('https://data.cityofnewyork.us/resource/xx67-kt59.json').subscribe(data => { // Read the result field from the ...
No matter how hard I look, I cannot figure out the correct way to combine return type annotation with fat arrow syntax. class BasicCalculator{ value:number; constructor(value:number=0){ this.value=value; } add= (operand:number)=> ...
Our application features a unique "Form Builder" tool that allows users to easily create forms by simply dragging and dropping form fields onto it. I am currently investigating ways to ensure that this functionality is accessible via keyboard navigation, e ...
Generate the HTML code of a component to open a new tab with an about:blank page. Reason: This method helps avoid creating HTML using string variables, such as: var html = '<div> <h3>My Template</h3> &a ...
Just starting out with programming. The API post call requires an object variable (derived from a variable) to be passed as a string like this: "option": { "235": “30” }, { "238": “32” } In my Angular 6 code: ...
I am working on implementing cursor-based pagination for a table of posts using Next.js API Route, Prisma, and useSWRInfinite. Currently, I am fetching the ten most recent posts with Prisma in a Next.js API Route and displaying them using useSWR, sorted b ...
Can this be achieved? static readonly statusMapping: { [key in UploadStatus]: PopupMessageStatus } = { UploadStatus.COMPLETED : PopupMessageStatus.COMPLETED } UploadStatus is an enum with numeric values, where UploadStatus.COMPLETED = 0 p ...
I am working on deploying multiple Angular and React apps on AWS through S3. Currently, one of my Angular apps is successfully running when accessing mysite.com. It functions properly as intended. I am looking for a way to load different apps based on th ...
I've encountered a strange issue with React Context and Typescript that I can't seem to figure out. Check out the working example here In the provided example, everything seems to be working as intended with managing state using the useContext ...
I am utilizing Tauri.JS in conjunction with Next.js. In this scenario, I need to execute the console command: npm run tauri dev --<argument name>=<some value>. Afterwards, I should be able to access the value of the argument in my JavaScript ...
I have developed an application with a menu located in the AppComponent, causing all child pages/components to inherit it as shown in the following pseudo code: <menu></menu> <--I am looking to remove this from the new page--> <router- ...
I am currently working on a project using express.js, but I would like to integrate angular into the project to create a single page application. The website currently refreshes the entire content from the server whenever a link is clicked, which seems ine ...
My goal is to transform an object structure like the one below... var obj1 = { firstName: 'John', lastName: 'Green', car: { make: 'Honda', model: 'Civic', revisions: [ { miles: 10150, code: & ...
I am currently developing an Angular 2 application using TypeScript. In a User Management component, I have implemented a table that displays all the users in my system. When a user is clicked on within the table, a form appears with their complete set of ...
Imagine having the initial number 100. If I enter 50 in another input, it should add 50 to 100. However, if I then change the value from 50 to 80, the total should be 180 and not 230. The goal is always to add numbers to the original sum, not the new valu ...
For my Angular application, I have a simple requirement of adding a CSS class when a row expands or collapses to highlight the row. I attempted to use gridOptions.getRowClass following the documentation at https://www.ag-grid.com/javascript-grid-row-styles ...
I'm facing an issue while trying to convert JSON data into an Excel sheet using the 'xlsx' library. Everything works perfectly when I use test data: //outputs excel file correctly with data var excelData = [{ test: 'test', test2: ...
I am encountering an issue while trying to set up Create-react-app with Material UI. The error message I receive pertains to Hooks. Could there be something else that I am missing? This is the specific error message being displayed: Error: Invalid hook ...
In my code, I am working with 3 classes ... class1 { constructor(a, b, c) { this.a = a; this.b = b; this.c = c; this.toClass2 = function() { // TODO: return this as an instance of class2; // the conversion would remove the un ...