AngularJS--给video标签赋值播放不了

前端之家收集整理的这篇文章主要介绍了AngularJS--给video标签赋值播放不了前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

公司在做直播,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;
    };
});

这样就可以看到主播直播了!

猜你在找的Angularjs相关文章