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

大佬教程收集整理的这篇文章主要介绍了H5的video的src从angular的controller赋值 angular1 和 angular2及以上，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

正常在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;
	}
}

大佬总结

以上是大佬教程为你收集整理的H5的video的src从angular的controller赋值 angular1 和 angular2及以上全部内容，希望文章能够帮你解决H5的video的src从angular的controller赋值 angular1 和 angular2及以上所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。