我在vue应用程序中使用videojs来播放S3上mp4视频文件的预签名URL。我使用预签名的URL作为videojs播放器的源，但我得到了错误
无法加载介质，因为服务器或网络出现故障，或者格式不受支持。
这是我的网址的样子：
https://bucket-name.s3.region.amazonaws.com/object.mp4?AWSAccessKeyId=xxxxxxxxxxxx
我在SO上看到了类似的问题，有人建议将URL格式改为下面的格式，但这也不起作用。
https://s3.amazonaws.com/bucket-name/object.mp4?AWSAccessKeyId=xxxxxxxxxxxx
如果我将上述任何一个硬编码URL作为其源，视频播放器都会播放视频，但当我作为变量时则不会。为什么使用变量时会改变行为？
<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>
问题是URL值没有被设置为源，正如@miserben所提到的。我进行了以下更改以在方法中设置源。虽然可能有更好的方法在Vue中设置源（除了使用querySloctor）
<video-player
:options="{
autoplay: false,
controls: true,
}"
/>
</div>
而且，
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);
}
);
},
