angular 与video标签

angular 与video标签

我们在

angluar

中常常使用{{ }}来对一个控制器中的变量绑定到页面（当然也不止这一种方法），所以在给

video

标签的

src

属性赋值的时候我们往往会不假思索的这样写：

<video id="infomedia" width='100%' height="auto" controls>
<source src="{{task.video_url}}">
</video>

一切看起来应该是正确的，不过即使在控制器给了

task.video_url

一个正确的地址，视频还是不会显示出来，why?

后来想到

angluar

不是推荐使用

ng-src

么？这个不就是加强版吧…于是改成这样：

<video id="infomedia" width='100%' height="auto" controls>
<source ng-src="{{task.video_url}}">
</video>

然并卵…

纠结之中通过控制台打印的错误了解到，这是个安全问题。于是谷歌之：angular默认不会把一个视频地址认定为一个安全的文件地址，除非在控制器使用

$sce

事先声明这个地址是可信的,当然使用前需要把这个模块注入到控制器中

方法如下：

task.video_url=$sce.trustAsResourceUrl(str)

如果

str

是一个正确的视频地址，那个通过这个声明，页面中的视频就能正确播放了^.^!