AngularJS H5 video src url
来源:互联网 发布:大数据时代书籍 编辑:程序博客网 时间:2024/06/06 00:56
首先说下背景 我这边开发web 使用后H5页面 用的是angularJs
问题: 在开发的时候 把路径放在H5页面里面的video标签 路径是对的 视频也是可以播放的 但是就是播放不了令人费解
如果我直接使用
<video src="{{item.url}}" width="320" height="240" controls="controls"> </video>这样会在前台报出angularJs错误
Error: $interpolate:interrInterpolation Error
说是插值误差然后我查到 在angularJs 中有一个 ng-src 我就把上列代码中的src 变成 ng-src
但是还是不行 他还是会在前台爆出 插值错误
最后我在网上找到了答案
为什么我们直接给ng-src 或者 src 路径是时不行的呢?
原来:
在angularJs中为了避免安全漏洞,一些ng-src或者ng-include都会进行安全校验,因此常常会遇到一个iframe中的ng-src无法使用。
人话就是 我们用angular里面的 ng-src 时会进行安全检查 因为我们是访问资源服务器上面的视频 所以他不给你这个url通过 所以我们就不放不了视频
这里有人要说了 为什么我用 src="{{item.url}}" 也不行 我想说的是 因为我们使用了{{item.url}} 这个在页面加载的时候 angularjs 会把src变成ng-src 这样所以不能通过
那么我们怎么解决这个url问题
简单直接 我们直接告诉angularJs 这个url是安全的 你信任他
方法是 $sce服务把一些地址变成安全的、授权的链接...简单地说,就像告诉门卫,这个陌生人其实是我的好朋友,很值得信赖,不必拦截它!
常用的方法有:
$sce.trustAs(type,name);$sce.trustAsHtml(value);$sce.trustAsUrl(value);$sce.trustAsResourceUrl(value);$sce.trustAsJs(value);
下面我是我处理过的代码 已经可以执行了
<div class="col-sm-10"> <video ng-src="{{videoUrl(item.url)}}" width="320" height="240" controls="controls"> </video> </div>
下面是JS videoUrl方法
/** * 视频路径处理 */ $scope.videoUrl = function(url){ return $sce .trustAsResourceUrl(url); }
这样我的视频就可以直接播放了
感谢网络上的大牛和前辈的分享,希望这边文章可以帮助到你 谢谢
0 0
- AngularJS H5 video src url
- angularJS Html5 的video src属性
- H5的video的src从angular的controller赋值
- h5 video
- h5 video
- H5--video
- AngularJS中ng-Src指令替代src 解决console的url请求404错误
- video src地址加密
- h5 video标签
- H5中video标签
- H5中video标签
- H5 video在微信中踩坑记
- h5 video 追加
- h5+vue video使用
- h5+video+progress自定义播放
- h5新标签video详解
- h5 的video视频控件
- H5标签video兼容IE8
- activeMQ学习之三(常见的一些问题和心得)
- 必看链接
- C++14学习笔记(3)——Lambda捕获表达式
- xcode git使用中的一些问题
- mybatis传递map中含有list数据结构的处理整合springmvc
- AngularJS H5 video src url
- 批量处理BCP导入文件到数据库
- 微信小程序开发资源汇总
- 怎么把多个ts文件合并成一个ts文件
- 杂谈:服务器的安全
- Android 中listView 滑动到顶部或底部时有阴影怎么办?android:fadingEdge="none"不管用?
- 线性回归与局部加权线性回归
- opencv surf 实现细节
- spark2.0版本的 DataFrame、DataSet 与 Spark sql