How to show opened video file using ng-src directive in Angularjs

Question

I am opening a video file using input type file. Following is the function that is being called and file is being sent here.

function fetchVideo(file) {
    if(file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            layoutVM.video = e.target.result;             
        }
        reader.readAsDataURL(file);
    }
}

The html for this is

<video loop muted autoplay>
     <source ng-src="{{layoutVM.video}}" type="video/mp4">
</video>

After FileReader works, e.target.result gets a long string starting from "data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACA .................................. "

The video is not being loaded in source, any idea?

Theo · Accepted Answer · 2018-03-02 13:46:40Z

0

haven't tested though but can you try to create object URL from file instead of using reader?

function fetchVideo(file) {
    if(file) {
        layoutVM.video = URL.createObjectURL(file);             
    }
}

answered Mar 2, 2018 at 13:46

Theo

2,0724 gold badges20 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Theo Over a year ago

oh, that's a pain. can you also try to add layoutVM.$apply();? stackoverflow.com/questions/18754943/…

Collectives™ on Stack Overflow

How to show opened video file using ng-src directive in Angularjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related