Webm video files getting served as text/html with HTTP status 206 (VueJS SPA)

[andyfurniss4]

Before opening, please confirm:

• I have checked to see if my question is addressed in the FAQ.
• I have searched for duplicate or closed issues.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

App Id

d3uuugdyhexx3o

Region

eu-west-1 (Ireland)

Amplify Hosting feature

Not applicable

Describe the bug

I have a HTML 5 video tag on a simple, brand-new Vue JS application which references a webm video file. When running locally, the video displays as expected with no issue.

Here's how I'm rendering the video:

    <video v-if="renderVideo" playsinline autoplay muted loop>
      <source src="../assets/media/video_crf40_311x600.webm" width="311" height="600" type="video/webm" />
      Your browser does not support the video tag.
    </video>

I am hosting this single page application on AWS Amplify.

When deployed, the video does not display. There are no console errors and nothing to indicate why the video is not showing. When inspecting the DOM, I can see the video element is definitely there.

After checking the Network tab in Chrome dev tools, I can see the request is being made for the video file but for some reason it's returning only 812B (the video is >1MB) and the status code is 206 (Partial Content). What's even more weird is that the content type is text/html and the response content contains the content of my project's index.html file!

Headers:

Response Content:

Expected behavior

The video file should be served correctly with the expected content-type of video/webm.

Reproduction steps

For the purposes of aiding diagnosis, I have created a separate Vue JS application where I have downloaded a sample webm file and changed nothing in the boilerplate application except adding this webm file to a video element. You can view the code in this repo: https://github.com/andyfurniss4/vue-webm-amplify-test. As a side note, this proves that it is not an issue with my particular webm file but rather all webm files (as the sample one also does not work).

These are the steps I took for this new repo/application:

1. Create new VueJs project in a new GitHub repo (quick start guide: https://vuejs.org/guide/quick-start.html).
2. Download sample webm file from: https://dl8.webmfiles.org/big-buck-bunny_trailer.webm
3. Add webm file to src/assets directory in Vue JS application.
4. Replace src/views/HomeView.vue contents with the following:

<script setup>
//import TheWelcome from '@/components/TheWelcome.vue'
</script>

<template>
  <main>
    <h2>Local asset (../assets/big-buck-bunny_trailer.webm)</h2>
    <video playsinline autoplay muted loop style="border:1px solid black;">
      <source src="../assets/big-buck-bunny_trailer.webm" width="311" height="600" type="video/webm" />
      Your browser does not support the video tag.
    </video>
    <h2>Web reference (https://dl8.webmfiles.org/big-buck-bunny_trailer.webm)</h2>
    <video playsinline autoplay muted loop style="border:1px solid black;">
      <source src="https://dl8.webmfiles.org/big-buck-bunny_trailer.webm" width="400" type="video/webm" />
      Your browser does not support the video tag.
    </video>
  </main>
</template>

This should render two videos. One is a reference to our local webm video and one is a reference to the version hosted at webmfiles.org.

5. Hook up Amplify to the GitHub project and deploy.

Observe that only one video shows; the one hosted on webmfiles.org and not our version hosted in Amplify.

https://main.d3uuugdyhexx3o.amplifyapp.com/

Build Settings

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Additional information

No response

[ghost]

Hi @andyfurniss4 apologies for the delay. With SPA apps we autogenerate a rewrite rule that ensures users can navigate throughout the app without triggering a server request on each page navigation. Please see Redirects for single page applications (SPA).

The regular expression that excludes different file formats from this behavior doesn't include webm which is why you're running into this issue.

The workaround is to add webm to that redirect expression like so:

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|webm)$)([^.]+$)/>

We have added this to our product backlog as well so we can update the default redirect rule. Please let us know if you're unblocked. Thank you!

[ghost]

Closing due to no response. If the above solution does not work for you please feel free to re-open. Thank you!

[github-actions]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see.
If you need more assistance, please either tag a team member or open a new issue that references this one.
If you wish to keep having a conversation with other community members under this issue feel free to do so.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.