CODEWITHSUNDEEP
htmlamazon-web-servicesvideoamazon-s3ionic-framework
ding7890
ding7890

Reputation: 23

Uploaded mp4 video can not play HTML5 Player

I have uploaded mp4 video using (aws-sdk) in my ionic mobile app. This is the peace of code.

$cordovaFile.readAsDataUrl(first, file).then(function(success) {
    AWS.config.region = 'eu-west-1';
    AWS.config.update({
                 accessKeyId: '',
                 secretAccessKey: ''
    });

    var bucket = new AWS.S3({
                     params: {
                         Bucket: 'www.bucket-new'
                     }
                 });

    var params = {
                  Key: "test.mp4",
                  ContentEncoding: 'base64',
                  ContentType: 'video/mp4', 
                  Body: success
                };

    bucket.upload(params).on('httpUploadProgress', function(evt) {
                  console.log('sucess');
                  $scope.uploading = true;
                  $scope.progress = parseInt((evt.loaded * 100) / evt.total) + '%';
                  console.log("Uploaded :: " + $scope.progress);
                  $scope.$apply();
                }).send(function(err, data) {
                  $scope.uploading = false;
                  $scope.$apply();
                });
})

Video is successfully uploaded. But the uploaded video cannot play on html5 player.

<video controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer"><source src="https://s3-eu-west-1.amazonaws.com/www.test-uploads/test.mp4" type="video/mp4"/></video>

When uploading a video using aws s3 dashbord that video is successfully been played on this player? What is the problem when uploading video through application (using aws-sdk)

Upvotes: 2

Views: 420

Answers (1)

Niroshan Ranapathi
Niroshan Ranapathi

Reputation: 3047

I here you have issue of cordova file upload plugin

$cordovaFile.readAsDataURL(path, file)

readAsDataURL function is supported, but the mediatype in Chrome depends on entry name extension, mediatype in IE is always empty (which is the same as text-plain according the specification), the mediatype in Firefox is always application/octet-stream. For example, if the content is abcdefg then Firefox returns data:application/octet-stream;base64,YWJjZGVmZw==, IE returns data:;base64,YWJjZGVmZw==, Chrome returns data:<mediatype depending on extension of entry name>;base64,YWJjZGVmZw==

More details

Then uploaded file id base64 encoded.

For the upload file use this method. Then you can upload binary data of video.

$cordovaFile.readAsArrayBuffer(first, file)
        .then(function(success) {

---Code---

})

Upvotes: 1

Related Questions