视频加载消息，直到响应来自后端

Question

视频Upload.js

 var json = {
                    "request": {
                        "service":{
                            "servicetype":servicetype,
                            "session_id": session_id
                        },     
                        "data":{     
                            "rolename":rolename
                        }
                    }
                };


                FileService.uploadFile( json, file ).then(function(res){
                                    console.log(JSON.stringify(res));

                    if( res && res.status.code == 0 ) {
                        $scope.getVideo( res.data.mediaids[0] );
                        $scope.getAll();
                    } else FlashService.Error(res.status.message,  true);
                });
            }

视频HTML：

<div class="row">
        <video ng-if="videoSource.length > 0" vg-src="videoSource" 
               preload='metadata' controls></video>
        <div class="file-upload-wrapper">
            <div class="file-video-upload">
                <input type="file" file-model="video" name="file" class="video"/>
            </div>
        </div>
        <div class="file-tags">
            <ul>
                <li ng-repeat="video in files | filter :'video'" >
                    <div class="file-tag-baloon">
                        <span>
                            <a ng-click="getVideo(video.id);">{{video.filename}}</a>
                        </span>
                        <span><a ng-click="removeVideo(video.id)">x</a></span>
                    </div>
                </li>
            </ul>
        </div>
    </div>

我已经使用我的后端服务请求完成了视频上传，也成功了。但问题是有时如果我的视频很大或网速太慢。它只是闲置，我需要做提示或 gif 图像，如视频加载，直到响应来自后端。需要帮助。

Answer 1

您可以设置一个标志来指示是否显示微调器，如下所示：

$scope.getVideo = function(id){
  $scope.displayLoadImage = true; // spinner flag

  FileService.uploadFile( json, file ).then(
    function(res){ // on success
      // Do your onsuccess stuff here
    }, function(error) {
      // Do your onsuccess stuff here
    }).finally(function()){
      // The finally statement is executed regardless of result
      $scope.displayLoadImage = true;
    });
}

然后在你的某个地方 html

<div ng-show="displayLoadImage">... display spinner...</div>

视频加载消息，直到响应来自后端

Video loading message until response comes from backend

video

html5-video

angularjs

angular-file-upload