VideoJS不以mp4格式播放预签名的URL
提问于 2021-02-04 18:15:57
我在vue应用程序中使用视频S3在S3上播放一个预先签名的S3视频文件的URL。我使用预先签名的URL作为视频播放器的源，但是我得到了错误
无法加载媒体，原因是服务器或网络失败或格式不受支持。
我的URL是这样的：
我查看了有关SO的类似问题，有人建议将URL格式更改为下面的格式，但这也不起作用。
如果我将上述硬编码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>
回答 1
Stack Overflow用户
发布于 2021-02-05 15:19:32
问题是URL值没有被设置为源，正如@misterben所提到的那样。我做了以下更改，以在方法中设置源。尽管可能有更好的方法在Vue中设置源(除了使用querySelector)
<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);
}
);
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66056670
复制
![用Vue.js在浏览器中裁剪图像[每日前端夜话0x86]](https://ask.qcloudimg.com/http-save/yehe-1120945/8nshrnc9qi.jpeg)
腾讯云开发者
