H5的video的src从angular的controller赋值 angular1 和 angular2及以上
H5的video的src从angular的controller赋值 angular1 和 angular2及以上
yizhichao 发表于6个月前
H5的video的src从angular的controller赋值 angular1 和 angular2及以上
  • 发表于 6个月前
  • 阅读 27
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

正常在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
粉丝 10
博文 341
码字总数 272159
×
yizhichao
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: