Angular base64 video interpolation fail ($sce)

Question

I'm trying to present a base64 video using Angular, only it fails to interpolate it due to $sce provider not trusting the source (which is a simple data url).

Error: [$interpolate:interr] Can't interpolate: {{video}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.  
URL: data:video/mp4;base64,AAAAGGZ0eXBtcDQyAAAAAGlzb21tcDQyAAAvzm1vb3YAAABsbXZoZ…+VXw5feXy+X3p3xV429Xirw87eVd0svWnUu3by8hW9zS6twXS5ZcbmgmlcKy+3CsI4raC9YA==

So far what I have tried:

$scope.video = $sce.trustAsResourceUrl('base64-string-here');

This didn't worked, I believe the method is still expecting a valid link and not a data url, therefore it is not the right solution.

Second try:

angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
// Completely disable SCE.
// Do not use in new projects.
$sceProvider.enabled(false);
});

This of course works, but then it disables the entire provider, hence making the app vulnerable.

I have yet came across a valid solution for this, i'm displaying base64 images without any hassle so i'm sure there must be a way solve it, or at least a workaround.

Much thanks for any help!

Answer 1

If anyone is looking for a solution, here's my input 3 months after posting the question:

Base64 for videos is not a good idea, even if you solve the interpolation problem the app will crash on Android when played.

I spent a lot of time on it, so the solution on "how to play non-streamed videos on apps" is to:

1. Download the file to the local phone and play it from there (if you use angular then look for ngCordova file transfer plugin)

2. For Android: HTML5 video tag will not work. Reason is somewhere between permission issues and Android not allowing local videos to be played on HTML. Use an android video player such as this media player

For iOS: HTML5 video tag works perfectly well with playing local videos. It converts it with a native one.

Hope it helps somebody someday.