公司在做直播,H5使用video标签来播放拉流地址的,但是小编遇到一个问题,把拉流地址写死在src属性里就可以播放,但是从库里动态获取赋值给src时就播放不了,查了查是由于用AngularJS的原因
动态获取到的路径angular环境不识别,需要进行处理一下,让angular识别,并认为是安全的路径来使用。angular提供了一种方法$sce
使用方法:
html页面:
<!--视频--> <video id="video" ng-src="{{videoUrlFun(anchorInfo.lvbrtmpaddress)}}" playsinline webkit-playsinline="true" x5-video-player-type="h5"> //anchorInfo.lvbrtmpaddress是angular动态获取的拉流地址 </video>
js内容:
var app = angular.module('myApp',[]);
app.controller('live',function($scope,$location,$http,$sce) {
//直播视频播放事件
$scope.videoUrlFun = function(url){
var urlFun = $sce.trustAsResourceUrl(url);
return urlFun;
};
});
这样就可以看到主播直播了!