Dynamically loading HTML5 videos using ngSrc

[jonathan...@gmail.com]

Hello everybody,

I'm currently in a small team developping a production monitoring software, and my part of the software is all about dynamically loading HTML5 videos to read/compare/annotate them...

Check the screenshots (API is in PHP/Yii Framework, frontend is AngularJS):

http://bit.ly/WezF14

http://bit.ly/WidEyq

http://bit.ly/S8lE25

I'm experiencing issues with HTML5 videos on Google Chrome (works fine on Chromium, FireFox, Safari, videos are converted in both mp4 and webm to be readable).

I'm using something like:

<video>

<source ng-src={{path}} type="webm"></source>

<source ng-src={{path}} type="mp4"></source>

</video>

Different videos can be loaded by clicking on them. At some point some videos won't load anymore and the fetching of the video will be in "pending..." mode in the network panel of Google Chrome.

Has anybody else met the problem?

I've found only one Gitub issue mentioning something about HTML5 videos and ng-src: https://github.com/angular/angular.js/issues/1352

Any kind of help would be much appreciated!

Thanks a lot,

Jonathan

[James Qualls]

Johnathan,

I have run into the same issue and I have narrowed the source of the issue to

NG-REPEAT. if the video is outside of that scope everything works correctly, but any kind of interpolation stops it completely.

My suggestion

create a video "frame" basically just the video and the src elemtn.

do something like this

$scope.videoURL = function(video URL or ID){

 s.newVideoURL == s.videoURL

//then bind the videos src to the new video URL so

//when you click the link it will change the video URL