HTML5视频不显示视频从axios反应数据获取

Question

我的视频播放器页面有问题，无法找到与视频文件相关的数据。我不断得到一个404未找到或"未定义的错误来自我的代码的axios代码片段，因为这是它的控制台日志所在。然而，数据对象也出现在控制台中，但url仍然未定义，视频播放器也是如此。

这是后端代码，这是通过路由:upload.js:

const { sequelize, video } = require('../models');
router.post("/getVideo", async (req, res) => {

try {
const getvideo = await video.findOne({
"_id" : req.body.videoId
})

return res.json(getvideo)
} catch (err) {
console.log(err)
return res.status(500).json({ error: 'Something went wrong' });
}
})

序列化控制台似乎是正常的

下面是前端代码:Detailvideopage.js

const DetailVideoPage = (props) => {
let { videoId } = useParams();
const [video, setVideo] = useState([]);

const videoVariable = {
videoId: videoId
}

useEffect(() => {
axios.post('http://localhost:5000/api/upload/getVideo', videoVariable, {
headers: {
'accept': 'application/json',
},
})
.then(response => {
if (response.data.success) {
console.log(response.data.video)
setVideo(response.data.video)
console.log(response.data.success);
} else {
console.log(response.data);
alert('Failed to get video Info')
}
}).catch(error => {
console.log(error);
});

}, []);

return (
<div className="postPage" style={{ width: '100%', padding: '3rem 4em' }} >
<video style={{ width: '100%' }} src={`http://localhost:5000/${video.filePath}`} controls></video>

</div>
);
}

下面是我从localhost页面收到的错误图像:

以下是前端的路由:import DetailVideoPage from'./components/views/DetailVideoPage/DetailVideoPage';

<Router>
<Routes>
<Route exact path='/video/:videoId' element={<DetailVideoPage />} />
</Routes>
</Router>

更新:我已经重命名了问题，以更准确地显示问题的性质。主要的问题是，即使数据被获取，视频也没有显示。

Answer 1

解决方案:在VC的建议下，我找到了解决方案。一个和一点研究，非常感谢他!

我已经为我的detailvidepage . js重构了一些代码:

function DetailVideoPage() {
const [Video, setVideo] = useState([]);
const videoId = useParams();
const videoVariable = {
videoId: videoId
}
useEffect(() => {
const getSingleVideoData = async () => {
axios.post('http://localhost:5000/api/upload/getVideo', videoVariable)
.then(response => {
console.log(response);
setVideo(response.data.filePath);
//   let myPath = response.data.filePath; 
//   alert( "MP4 path is : " + myPath);
})
.catch(function (error) {
console.log(error);
});
}
getSingleVideoData();
}, []);

return (
<>
<Row>
<Col lg={18} xs={24}>
<div className="postPage" style={{ width: '100%', padding: '3rem 4em' }}>
<video style={{ width: '100%' }} src={`http://localhost:5000/${Video}`} type='video/mp4' controls autoPlay muted />
</div>
</Col>
</Row>
</>
)

}

Answer 2

用于测试…查看是否在页面上显示视频:

const DetailVideoPage = (props) => {
let { videoId } = useParams();
const [video, setVideo] = useState([]);

const videoVariable = { videoId: videoId }

var myDiv; var myVid;

useEffect(() => {
axios.post('http://localhost:5000/api/upload/getVideo', videoVariable, {
headers: {
'accept': 'application/json',
},
})
.then(response => {
if (response.data.success) 
{
console.log(response.data.video)
setVideo(response.data.video)
console.log(response.data.success);

///////////////////////////////////
//# test adding of Video

//# create the Div
myDiv = document.createElement('div');
myDiv.setAttribute("id", "myDiv");
//# create the Video object
myVid = document.createElement( "video");
myVid.setAttribute("id", "myVid");
myVid.setAttribute("controls", "true" );
myVid.setAttribute("height", "500");
myVid.setAttribute("src", path);
myVid.load();
//# add Video into Div, then finally add Div to page
myDiv.appendChild( myVid );
document.body.appendChild( myDiv );

///////////////////////////////////
} 
else 
{
console.log(response.data);
alert('Failed to get video Info')
}
}).catch(error => {
console.log(error);
});

}, []);

//# If needed... see if returning the Div works...
//return ( myDiv );

/*
return (
<div className="postPage" style={{ width: '100%', padding: '3rem 4em' }} >
<video style={{ width: '100%' }} src={`http://localhost:5000/${video.filePath}`} controls></video>

</div>
);
*/
}