angular 与video标签

来源:互联网 发布:远程数据采集系统 编辑:程序博客网 时间:2024/05/29 18:32

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

0 0
原创粉丝点击