Not able to make html 5 video work

[Pinal Bhatt]

I tried various options but some how not able to make Html5 video tag work with angularjs.

My source code:

<video poster="{{CurrentModule.Thumbnail3}}" height="360" width="640" preload="none" controls ng-cloak>

                    <source type="video/mp4" ng-src="{{CurrentModule.mp4}}" />

                    <source type="video/webm" ng-src="{{CurrentModule.webm}}" />

 </video>

Poster file works correctly but I am getting following javascript error  and video never plays. (in all three browsers Chrome IE, Firefox )

Error: [$interpolate:interr] http://errors.angularjs.org/1.2.14/$interpolate/interr?p0={{CurrentModule.mp4}}&p1=Error: [$sce:insecurl] http://errors.angularjs.org/1.2.14/$sce/insecurl?p0=http://media.ch9.ms/ch9/6139/6571eb61-ffbd-4589-a899-6ca36c8f6139/ASPNETJSMod02_high.mp4 at Error (native) at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js:6:450 at p (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js:75:275) at pre (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js:58:384) at A (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js:49:338) at h (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js:43:83) at h (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js:43:100) at A (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js:49:467) at h (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js:43:83) at h (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js:43:100)

I tried videogular but getting same error. I am using AngualrJS 1.2.14

Thanks & Regards

Pinal Bhatt

[calvin crane]

We will need to see more of the code looks like you are doing an api call which is giving an error.
Because you have a JavaScript error all JavaScript function stops there and do this is blocking everything

[Justin Walsh]

Hi Pinal

Is this a cross origin request?

Have you followed the link in the error message?

Justin

[Justin Walsh]

Here's a working plunkr

The trick is to trust the url as a resourceUrl 

[Pinal Bhatt]

yes its cross domain call but if i hard code the video url it works fine, but does not works with AnglarJS view.

[Pinal Bhatt]

yes code in the plunkr is working but almost similar pattern implemented, but does not works. I am not getting that error now but the video does not play. (player controls remains disabled.)  Also tried $sce.trustAsResourceUrl. but no success.

[Justin Walsh]

Hi Pinal, 

If you put a plunkr together demonstrating your problem we might be able to help you further.  Until then, our hands are tied.

Justin

[Pinal Bhatt]

weired... but the plunkr you provided is not working for me today in chrome browser. looks like some issue with chrome.. some time it works and some time control icons for video player remain disabled. 

[SUBHRASIL CHATTERJEE]

Hi Pinal,

I was facing similar problem and resolved it.

First check whether the scope variable for video src has value when the tag is getting created. For this you can use ng-init in the video tag.

If you see that the scope variable does not have the proper value just do the following.

1. In HTML put a ng-if in the video tag (like ng-if="asdf")

2. In controller one you set the value for scope variable for the video src, make asdf=true.

Hopefully this will work. In my case it worked actually.