CODEWITHSUNDEEP
angulartypescript
Joshua Deshazer
Joshua Deshazer

Reputation: 193

when someone selects a file I want to dynamically create the video hmtl then show the video with play features in angular 2 and typescript

I am trying to show the video they select and display it where they can play it after they choose that file.

this is my html 

<br>
            <input type="file" (change)="fileChangeEvent($event)" placeholder="upload file..." class="form-control" id="Video" required>
       <br>
       <div     id="myVideo">

        </div>

           <button id="Submit" type="button" (click)="upLoad()">Submit</button>

div myvideo is where I will put my video html after they click on the choose file input by calling the fileChangeEvent function

here is my typescript function

fileChangeEvent(fileInput: any){
this.filesToUpload = <Array<File>> fileInput.target.files;
var video = <HTMLScriptElement>document.getElementById("myVideo")
var File = this.filesToUpload[0];
     video.innerHTML = '<video width="320" height="240" controls>'+
                        '<source id="videoForReal" src="" type="' + File.type + '">'+
                        '</video>'

var preview = <HTMLScriptElement>document.getElementById('videoForReal'); 

var reader = new FileReader();

reader.addEventListener("load", function(){
    preview.src= reader.result; 

}, false);

if(File) {
    reader.readAsDataURL(File); 
}

}

when i debug the code I can see that the base 64 data goes into preview.src but the video does not show any help would be appreciated.

Upvotes: 0

Views: 94

Answers (1)

Joshua Deshazer
Joshua Deshazer

Reputation: 193

I was doing this wrong I needed to use window.URl to grab the video...

this code fixed my issue 

fileChangeEvent(fileInput: any){
//this.filechosen = false; 
this.filesToUpload = <Array<File>> fileInput.target.files;
var file = this.filesToUpload[0]; 
var videoNode = document.querySelector('video')
var URL = window.URL; 
var fileUrl = URL.createObjectURL(file); 



 if(file){
     this.filechosen = false;
     videoNode.src = fileUrl;   
}
else {
    this.filechosen = true; 
}

}

I also changed my html to show the video based off the filechosen variable

<br>
            <input type="file" (change)="fileChangeEvent($event)" placeholder="upload file..." class="form-control" id="Video" accept="video/mp4, video/x-m4v, video/*" required>
       <br>
       <div id="myVideo">
           <video [hidden]="filechosen" width="320" height="240" controls autoplay>
               </video>
        </div>

           <button id="Submit" type="button" (click)="upLoad()">Submit</button>

Upvotes: 1

Related Questions