javascript - VideoJS not playing pre-signed URL in mp4 format

Question

I'm using videojs in a vue application to play a pre-signed URL for a mp4 video file on S3. I'm using the pre-signed URL as the source of the videojs player but I get the error

The media could not be loaded, either because the server or network failed or because the format is not supported.

This is how my URL looks like:

https://bucket-name.s3.region.amazonaws.com/object.mp4?AWSAccessKeyId=xxxxxxxxxxxx&Expires=xxxxxxx&Signature=xxxxxx&x-amz-security-token=xxxxxxx

I looked at similar questions on SO and someone suggested to change the URL format to below format, but that didn't work either.

https://s3.amazonaws.com/bucket-name/object.mp4?AWSAccessKeyId=xxxxxxxxxxxx&Expires=xxxxxxx&Signature=xxxxxx&x-amz-security-token=xxxxxxx

The video player plays the video if I put either of the above hardcoded URLs as its source, but not when I do as variables. Why is it changing behaviour when a variable is used ?

<template>
  <div>

        <video-player
          :options="{
            autoplay: false,
            controls: true,
            sources: [
              {
                src: `${URL}`,
                type: 'video/mp4',
              },
            ],
          }"
        />
      </div>
    
</template>

<script>

import VideoPlayer from '@/components/VideoPlayer.vue';

var AWS = require('aws-sdk');

var bucketName = 'xxxx';
var s3 = new AWS.S3({
  apiVersion: '2006-03-01',
  params: { Bucket: bucketName },
});

export default {
  components: {
    VideoPlayer,
  },
  data() {
    return {
      URL: String,
    };
  },

  methods: {
    getURL() {
      var self = this;
      let myPromise = new Promise(function (myResolve, myReject) {
        const url = s3.getSignedUrl('getObject', {
          Key: `xxxxx.mp4`,
          Expires: 3600,
        });

        myResolve(url);
        myReject('sorry, error');
      });

      myPromise.then(
        function (value) {
          self.URL = value;
        },
        function (error) {
          console.log(error);
        }
      );
    },
  },

  mounted() {
    this.getURL();
  },
};
</script>

question from:https://stackoverflow.com/questions/66056670/videojs-not-playing-pre-signed-url-in-mp4-format

Answer 1

The issue was that the URL value was not being set as the source, as mentioned by @misterben. I made the following changes to set the source in the method. Although there might be better ways of setting the source in Vue ( other than using querySelector)

<video-player
          :options="{
            autoplay: false,
            controls: true,
          }"
        />
      </div>

and,

import videojs from 'video.js';
getSignedUrl() {
  // this is because the imported videoPlayer component has class="video-js"
  var player = videojs(document.querySelector('.video-js'));

  var self = this;
  var params = {
    Bucket: 'xxxxx',
    Key: `xxxxx`,
  };
  var promise = s3.getSignedUrlPromise('getObject', params);
  promise.then(
    async function (url) {
      self.URL = url;
      await player.src({
        src: url,
        type: 'video/mp4' /*video type*/,
      });
    },
    function (err) {
      console.log(err);
    }
  );
},