如何使用重定向的 url 作为 <img>、<audio> 或 <video> 的来源？

Question

我在 AWS S3 上托管了一些媒体文件。我想设置从我自己的网站到文件的重定向，并将我自己网站的 url 链接用作媒体播放器的src，这样我就可以更好地跟踪我自己网站对文件的请求数量.

换句话说，而不是使用

<audio style="width: 100%;" controls="controls">
<source src="https://s3.amazonaws.com/mybucket/audiofile.mp3“ />
</audio>

我想用

<audio style="width: 100%;" controls="controls">
<source src="https://my_own_website.com/tracks/audiofile.mp3“ />
</audio>

让它指向https://s3.amazonaws.com/mybucket/audiofile.mp3 并播放文件。

我尝试过的：

1. 在我的前端重定向（使用 react 和 react-router）。我尝试像这样设置重定向路由：

   <Route exact={true} path="/tracks/:id" component={(props) => {
       const id = props.match.params.id;
       window.location.replace(`https://s3.amazonaws.com/soundwiseinc/soundcasts/${id}`);
   }} />
   

2. 在我的后端重定向（使用 node.js 和 express）。我尝试如下重定向：

   app.get('/tracks/:id', (request, response) => { 常量路径 = String(request.path).slice(8); console.log('path:', path); response.redirect(200, https://s3.amazonaws.com/mybucket/${path}); });

但他们都没有工作。 mp3 无法播放。并且控制台错误说来源无效。

Answer 1

1. 为 ex: playmedia.php 创建一个服务器端页面并将云文件名传递给该页面。

2. 在页面中添加您的跟踪代码并将分析数据保存到数据库。

3. 使用来自 playmedia.php 的 Amazon S3 Stream Wrapper 从 S3 流式传输 MP3