How do i force download Video in AngularJs from Am

问题:

I have written code to download a video uploaded to amazon s3 using aws javascript sdk. Everything works fine but for some videos open up in the browser and start playing. Here is the code below:

View:

<a href="#" ng-click="downloadVideo(video)">Download Video</a>

Controller:

$scope.downloadVideo = function (video) {
            videoLocation = video.video_location;
            var bucketPath = videoLocation.substring(0, videoLocation.lastIndexOf("/") + 1);
            bucketPath = bucketPath.substring(0, bucketPath.length - 1);
            var fileName = videoLocation.substring(videoLocation.lastIndexOf("/") + 1, videoLocation.length);
            var videoSignedUrl = VideoFactory.downloadVideo(bucketPath,fileName);            
            $window.open(videoSignedUrl);
        }

VideoFactory :

downloadVideo: function (bucketPath,fileName) {
    bucketName = aws.bucket_name;

    options = {
        accessKeyId : 'XXXXXXXXXXXXXXXXXXXXX',
        secretAccessKey : 'XXXXXXXXXXXXXXXXXXXXXXXXXXX',
        region : 'XXXXXX'
    }

    var params = {
        Bucket: bucketName + '/'+ bucketPath, Key: fileName, Expires: 60
    };

    var s3 = new AWS.S3(options);
    var url = s3.getSignedUrl('getObject', params);
    return url;
}

So when videos open up in a new window they start getting downloaded at the bottom of the browsers. But for some unknown videos they open up in a window and start playing. How can i stop this in angularjs. What is the suggested workaround and how do others handle this kind of issues??

I did google but most of the stackoverflow answers here say to open files in window and browsers automatically downloads it.

回答1:

Try this solution it may help you.enter link description here

View:

<a href="#" ng-click="downloadVideo(video)">Download Video</a>
<a id="ExportToExcel" style="display: none;"></a>

Controller:

$scope.downloadVideo = function (video) {
   videoLocation = video.video_location;
   var bucketPath = videoLocation.substring(0, videoLocation.lastIndexOf("/") + 1);
   bucketPath = bucketPath.substring(0, bucketPath.length - 1);
   var fileName = videoLocation.substring(videoLocation.lastIndexOf("/") + 1, videoLocation.length);
   var videoSignedUrl = VideoFactory.downloadVideo(bucketPath,fileName);            
   document.getElementById("ExportToExcel").href = videoSignedUrl;       
   document.getElementById("ExportToExcel").click();
}

回答2:

The trick that worked was making the video as an attachment during the video upload to S3 :

options = {
    accessKeyId : 'xxxxxxxxxxxxxxxxxxxxxxx',
    secretAccessKey : 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    region : 'xxxxxx'
}

var s3 = new AWS.S3(options);               

var params = {
    Bucket : bucketName + '/' + bucketStructure,
    Key: fileName,
    ContentType: file.type,
    Body: file,
    ServerSideEncryption: 'AES256',
    ACL : 'private',
    ContentDisposition: 'attachment; filename=' + fileName,
    ContentType: 'application/octet-stream'
};

s3.putObject(params, function(err, data) {
  if(err) {
    // There Was An Error With Your S3 Config
    console.log('AWS Error : '+err.message);
    return false;
  }
  else {

    console.log('AWS Video upload done!');            

  }
})

This would make the video to force download automatically when a signed url was used. Has worked for most of the video mime types for me.