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是一个正确的视频地址，那个通过这个声明，页面中的视频就能正确播放了^.^!