Angular 2 - Play Video Directly from File Element Input
This seems like it should be super simple. I have a file element that I'm allowing people to upload to. Before I allow this file to be uploaded to the server, I want them to preview what their post is going to look like with the appropriate contents provided. I had assumed I could simply take the file blob, convert it to a Base 64 string and bind it to the video source with the appropriate type. While this is all good, the Base 64 source element doesn't seem to be working consistently when binding it to a video element, let alone a video element wrapper library like videogular2.
Has anybody had any luck taking a file input element and binding it to a video element src directly via an in-browser Base 64 conversion? I had attempted to make a FileReaderService that would wrap an instance of the file reader that could take an instance of the file blob and get the Base 64 string conversion to be bound to the video source element. I've never had any issues working with Base 64 strings streamed from a server; however, converting it directly from a file is not giving me consistent results when working with video content.
I'm restricting them to only working with mp4 files as well, so I can't see any reason the browser would restrict these from playing appropriately. I have a couple of test files, but I can't even get the standard 30 MB Big Buck Bunny to play directly from the file input element upload.