HTML video appearing only in Firefox, not in any other browser when served from a local server

Question

I have a simple page with a <video> element and I am testing it with a simple server I run with python ( python -m http.server ). I've also tried with JavaScript http-server and I'm getting the same results.

I've been testing mostly in Firefox for now, but it used to work in Chrome and Opera. However, today I tried to open the page and it's only working in Firefox. The video doesn't appear in Chrome, Opera and Edge. When I go to the console, I get the following issues:

Chrome:

DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Opera:

Unchecked runtime.lastError: Invalid color name.

Error handling response: TypeError: Cannot destructure property 'h' of 'undefined' as it is undefined.
    at chrome-extension://hhckidpbkbmoeejbddojbdgidalionif/components/video_toolbar.js:310:46

Failed to load resource: the server responded with a status of 404 (File not found)

Edge:

Doesn't even show issues.

If I open the html file directly, without the server, the video appears in all browsers, but I'm also displaying.vtt captions, so I need to test with the server.

What I have is a very simple <video> element:

<div class="video">
  <video id="vid" controls>
    <source src="some_video.mp4" type="video/mp4">
    <track kind="subtitles" src="some_captions.vtt" srclang="en" default>
  </video>
</div>

I've read that I should disable extensions, but I really haven't installed any in these browsers. I've also read that I should disable JavaScript and CSS source maps, but that didn't really work.

Answer 1

Tried it here, with the video in the same folder as my test.html. mp4 video is working on firefox, chrome and edge. maybe some problem with your webserver?

Failed to load resource: the server responded with a status of 404 (File not found)

irritates me - hit F12, switch to.network and see from where it tries to open your video (maybe you need to click play first). Right click it - open in new tab to check the url and if the video is working

Answer 2

I use Visual Studio to test the code in localhost and I got the error Failed to load resource: the server responded with a status of 404 (File not found) at first. The video shows but the subtitles doesn't show and the .vtt file can't be found.

Then I found the cause of the issue: .vtt file MIME type is not added. Then I add the MIME type in Web.config like below and the video and subtitles work well in all browsers:

<configuration>
    <system.webServer>
      <staticContent>
        <remove fileExtension=".vtt" />
        <mimeMap fileExtension=".vtt" mimeType="text/vtt" />
      </staticContent>
    </system.webServer>
</configuration>

The issue in your situation is also Failed to load some file and related with the subtitles <track> element, so I suspect if it is also caused by file MIME type not being added. You can check which file is failed to load in your site and adding corresponding MIME type to see if it can fix the issue.