文档章节

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

yizhichao
 yizhichao
发布于 2017/08/30 16:42
字数 221
阅读 33
收藏 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
博文 460
码字总数 362508
作品 0
南京
程序员
私信 提问
【前端】—聊聊我认识的Angular

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

zt15732625878
2018/05/19
0
0
开放才能进步!Angular和Wijmo一起走过的日子

Angular已成为广受欢迎的前端框架。去年9月份,期待已久的Angular2的正式版发布之后,Angular又迎来了新一轮热潮。伴随着Angular这一路走来,Wijmo一直都是第一个全面支持各种版本Angular的J...

葡萄城技术团队
2017/02/16
2
0
Angular.js 相关记录

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

彭博
2014/04/25
0
2
什么时候应该使用 Angular 2

人们常常会问--“我应该在我的新项目中要使用 Angular 2吗?” 假使该项目不需要被准备好几个月? 假使它是一个小项目,或者一个概念验证? 可能你已经在家中正在玩弄Angular 2,但是在工作中...

oschina
2016/01/08
8.5K
13
Angular 1 和 Angular 2 集成:无缝升级的方法

已经有了 Angular 1 应用程序,正在想着怎么把它升级到 Angular 2?看看我们是怎么样支持递增升级的。 摘要 好消息。 我们计划在同一应用程序上允许 Angular 1 和 Angular 2 混合使用 你可以...

oschina
2015/08/27
8.5K
13

没有更多内容

加载失败,请刷新页面

加载更多

MIT 6.828 main.c文件分析

#include <inc/x86.h>#include <inc/elf.h> /*这是一个简单粗略的boot loader,它唯一的工作就是从硬盘的第一个扇区启动格式为ELF的内核镜像硬盘布局这个程序(包括boot.S和mai...

FeanLau
22分钟前
0
0
SpringBoot 整合 Redis

1. pom.xml 文件中添加 Redis 依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId><exclusions><exclusio......

北漂的我
30分钟前
1
0
TechDay实录 | 认识PaddlePaddle:更低使用成本、更高开发效率的深度学习框架

导读: 在人工智能时代,各行各业都在尝试利用机器学习/深度学习等前沿技术来解决自身的业务需求,深度学习框架也应运而生。为了继续帮助AI开发者们在深度学习的道路上快速升级,百度PaddleP...

PaddleWeekly
31分钟前
3
0
JAVA AES加解密服务

package com.pasenger.aes;import lombok.Data;import org.apache.commons.codec.binary.Base64;import org.springframework.beans.factory.InitializingBean;import org.springframewo......

Pasenger
42分钟前
0
0
SpringCloud集成 Mybatis分表插件shardbatis 踩坑日志及其原理分析

公司新开发的系统数据量过大,需要进行分表处理,我在网上浏览一圈,选中了Shardbatis,原因有二: 1.公司项目本身集成了Mybatis,而Shardbatis是其插件,引入方便; 2.Sharbatis十分轻便,只...

L墨龙
49分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部