AngularJS ng包含Html5视频不会被替换

时间:2015-02-19 13:48:27

标签: javascript angularjs html5 video angularjs-ng-include

我的问题:ngIncluding一个视频源不会取代视频。

我的页面有一个Feed和一个预览,每当我点击Feed中的一个帖子时,它的预览会被注入(ngInclude)到预览区域。 它适用于youtube视频,图像和文本,但当它到达html5视频时,相同的视频会一直显示,并且似乎源不会在页面中被替换。

最奇怪的是当我进入chrome调试器并检查元素时,我看到它的源被替换为不同的url,但预览中的视频不会改变。

我甚至尝试启用自动播放功能,当我浏览帖子时,视频会继续流畅播放。

以下是相关的代码位:

获取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>

主页包括位:

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

在我的javascript中,当我在Feed中发布帖子更改事件时,我只是重新初始化$ scope.htmlInclude

有人遇到类似的东西吗?我应该以某种方式刷新视频源吗?如果是这样的话。

谢谢!

2 个答案:

答案 0 :(得分:0)

尝试在视频源代码

中使用ng-src而不是src

<source ng-src="{{postInfo.Media.videoStandardResolution}}" type="video/mp4">

这让angular知道src将被替换并获取结果

答案 1 :(得分:0)

最终解决这个问题的原因是删除了视频代码中的源代码并直接更改了&#39; src&#39;视频的属性。

遇到这个:http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-source-element 从那里很明显。

所以我的html现在看起来像这样:

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