使用angularjs进行身份验证的视频播放

时间:2014-12-11 15:49:34

标签: angularjs authentication html5-video

我正在开发一个angularjs SPA类型的项目,在那里我遇到了一个需要播放普通mp4文件的情况,但问题是视频不公开,所以为了访问它我需要在标题中发送访问令牌。

所以我的问题是

  1. 如果可以,我该如何进行播放
  2. 是基于令牌的身份验证是安全访问媒体的正确方法

2 个答案:

答案 0 :(得分:1)

最后我想出了这段代码,你看到的代码是指令的一部分



var video = $http({
                method : "GET",
                url : "http://path/small1.mp4",
                responseType : "blob",
                headers : { X-Access-Token : "token" }
         });


          video.success(function(data,status,headers,config){
              if((data != undefined)){
                var dataURL= window.URL.createObjectURL(data);
                $scope.videourl = dataURL;
                //window.location =dataURL;

                var video = document.getElementById("emptyvideo");
                video.src = dataURL;
                video.addEventListener('error', function(err){
                    // Nothing to see here...
                    console.log(err);
                    // Will throw a MediaError code 4
                    console.log(video.error);
                });


              }else{
                alert("error");
              }
                
          });

          video.error(function(data,status){
              alert("error");
          });   




这适用于小型视频,但如果视频变大,这不是一个好的应用程序。因为在这段代码中需要完全加载视频以进行播放,如果有更好的应用,请建议我

答案 1 :(得分:0)

为了不失去流传输能力,最好的方法(如果不是唯一的方法)是使用作为URL参数传递的访问令牌来保护静态视频。我的意思是您需要通过标头中的令牌放弃身份验证。

因此,您需要对服务器上的服务进行更改以通过查询参数对请求进行身份验证。

例如,您的网址如下所示:www.yourawesomeserver / your_video?access_token = ue873wijweu383j3

如果令牌正常,则您的服务器应提供静态文件。