AngularJS ngInclude Html5 Video doesn't get replaced

Question

My issue: ngIncluding a video source doesn't replace the video.

My page has a feed and a preview, each time I click on a post in the the feed, its preview gets injected (ngInclude) to the preview area. It works fine for youtube video, for images and for text but when it gets to html5 videos, the same video keeps showing and it seems the source doesn't get replaced in the page.

Weirdest thing is when I enter chrome debugger and inspect the element, I see its source gets replaced with a different url, but the video in the preview doesn't change.

I even tried enabling autoplay and when I move through posts the video continues to play on smoothly.

Here are the relevant code bits:

The preview that gets ngIncluded:

<div ng-if="postInfo.Media.type == 'video'">
    <video name="media" width="582" height="582" controls autoplay>
        <source src="{{postInfo.Media.videoStandardResolution}}" type="video/mp4">
    </video>
</div>

The main page including bit:

<div id="preview-panel">
    <ng-include src="htmlInclude"  onload="responsiveCalc()"/>
</div>

And in my javascript when I get an event of post changed in the feed, I just re-initialize the $scope.htmlInclude

Anyone came across anything like it? Should I somehow refresh the video source? And if so how.

Thanks!

Answer 1

What ended up solving this was removing the source tag inside the video tag and changing directly the 'src' attribute of the video.

Came across this: http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-source-element and from there it was pretty obvious.

so my html now looks like this:

<video name="media" width="582" height="582" controls autoplay src="{{postInfo.Media.videoStandardResolution}}">
    Your browser does not support the video tag.
</video>