HTML5视频下载了两次

Question

我有一个角度指令，将video element附加到html中，就像这样

elem.append("<video " + "src='" + scope.MediaURL + "' type='video/" + type + "'"></video>")

我现在已经开始使用templateUrl了，我有像这样的视频元素：

<video controls preload="metadata" autoplay ng-src="{{mediaUrl | trustUrl}}"></video>

trustUrl是我从here获取的过滤器，因为同样的问题。

但问题是现在视频已下载两次。我无法弄清楚原因。可能是因为过滤器？

编辑：我认为这不是因为过滤器，因为没有它，错误会被抛出两次。

EDIT2：我需要提供更多细节。该模板包含video和img个元素。根据{{​​1}}中的媒体类型，只显示一个。所以它看起来像这样：

mediaUrl

仅在第一次显示<video ng-if="mediaType == 'video'"></video> <img ng-if="mediaType == 'image'" /> 元素时才会下载两次视频。因此，如果video是图片并更改为视频，则会下载两次。如果我然后更改也有视频的网址，它将被下载一次。如果我将网址更改回图片然后再返回视频，则会再次下载两次，依此类推。