文档章节

H5的video的src从angular的controller赋值 angular1 和 angular2及以上

yizhichao
 yizhichao
发布于 2017/08/30 16:42
字数 221
阅读 29
收藏 0

正常在video的src赋值

<video id="myVideo" src="{{videoPath}}" controls="controls" width="100%" height="180px"></video>

会出现AngularJS错误

 

angular 1 --------------------------------------------------------

angular里面的 ng-src会进行安全检查,服务器视频的url无法判断是否安全,所以不给通过。因此我们就放不了视频。

我们可以用$sce方法把一些地址变成安全的,告诉angular这是个安全你的url。

常用的方法有:

$sce.trustAs(type,name);
$sce.trustAsHtml(value);
$sce.trustAsUrl(value);
$sce.trustAsResourceUrl(value);
$sce.trustAsJs(value);

代码实现:

HTML:

<video id="myVideo" src="{{videoUrl(videoPath)}}" controls="controls" width="100%" height="180px">
您的浏览器不支持视频播放</video>

js:

$scope.videoPath = "http://***/..../a.mp4"

$scope.videoUrl = function (url) {
          return $sce .trustAsResourceUrl(url);
        };

 

 

angular 2 及以上 --------------------------------------------------------

我这边是angular4 

代码片段

import { Pipe, PipeTransform } from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
@Pipe({ 
	name: 'trustAsResourceUrl' 
})
export class trustAsResourceUrl implements PipeTransform {
	constructor(private sanitizer:DomSanitizer){}
	transform(url:string) {
		let sanitizedUrl = this.sanitizer.bypassSecurityTrustUrl(url);
		return sanitizedUrl;
	}
}

 

© 著作权归作者所有

共有 人打赏支持
yizhichao

yizhichao

粉丝 14
博文 402
码字总数 305881
作品 0
南京
程序员
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
05/19
0
0
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
探索angular源码--启动(1)

前言 angular2.0已经出来了,本来应该是研究最新的angular源码,但毕竟用了angular1这么久了,一直对其源码实现十分好奇,再加上研究源码主要目的是学习,版本不是特别重要,因此就1.3版源码...

烽穹寒渊
2015/08/01
0
0
第214天:Angular 基础概念

一、Angular 简介 1、 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多款产品 - 目前有一个全职的开发团队继续开...

半指温柔乐
04/04
0
0
5ThingsToKnowBeforeYouGetStartedWithAngulerJS

AngularJS is Entirely Client-Side AngularJS is written in JavaScript, and it functions entirely on the client side. This means two things for your app. First, you can run Angula......

perfectspr
2014/12/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

函数调用约定 (cdecl stdcall)

函数调用约定 (cdecl stdcall) 在 C 语言里,我们通过阅读函数声明,就知道怎么携带参数去调用函数,也能在函数体定义内使用这些参数。但是 CPU 并不直接完成函数调用的传参操作,这需要人为...

傅易
3分钟前
0
0
Python 核心编程 (全)

浅拷贝和深拷贝 1.浅拷贝:是对于一个对象的顶层拷贝,通俗的理解是:拷贝了引用,并没有拷贝内容。相当于把变量里面指向的一个地址给了另一个变量就是浅拷贝,而没有创建一个新的对象,如a=b...

代码打碟手
5分钟前
0
0
mysql5.7 修改datadir

mysql 的默认存储路径为 /var/lib/mysql ,修改后为 /data/mysql 关闭服务 service mysql stop 复制mysql 数据文件到新的目录 cp -rp /var/lib/mysql /data 查看原目录的权限,如果新目...

hotsmile
22分钟前
0
0
证书安装指引之Tomcat 证书部署

Tomcat 证书部署 0 申请证书 1 获取证书 如果申请证书时有填写私钥密码,下载可获得Tomcat文件夹,其中有密钥库 www.domain.com.jks; 如果没有填写私钥密码,证书下载包的Tomcat文件夹中包括...

吴伟祥
26分钟前
0
0
ConcurrentHashMap1.7和1.8的底层不同实现

1.Hashmap和HashTable在线程安全方面的优劣? Hashmap多线程会导致HashMap的Entry链表形成环形数据结构,一旦形成环形数据结构,Entry的next节点永远不为空,就会产生死循环获取Entry。 Hash...

刘祖鹏
42分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部