Loading mp4 video in to `video` tag w/ File loader

[benbayard]

I added:

{
  test: /\.mp4$/,
  loader: 'file'
}

to my webpack config. Then I required my mp4 video file. Used it like so:

            <video controls>
              <source src={videos.brian} />
            </video>

(I also tried with <video src= /> that did not work). What happens is I see 2 requests being made:

I believe this is a configuration issue with webpack. Perhaps a serving issue with server.js. I can use youtube to host the video, but I was hoping to have a little more control over the video style. Any help would be appreciated or more information that you need from me.

I understand that this is not an issue w/ the boilerplate itself, but I didn't know of a better place to put it.

[benbayard]

Here is a public repo with my project:

https://github.com/benbayard/intent-to-pursue

[kenwheeler]

Wow this one is a brain teaser. Oddly, almost every sanity check checks out. I need video in a preso for the end of the month too, so I'll be hunting this one down.

[kenwheeler]

Ok so the first time it loads, its a video preload, where the browser gets the meta data. The second one is the actual load, and it comes up empty handed. Trying to figure out what webpack is doing to this file that leaves metadata unscathed, but makes it not loadable in browser. It plays when you build the project and open the video with finder, but not in the browser.

[kenwheeler]

@benbayard I was able to get a different mp4 video working by using the inline file loader syntax:

const videos = {
  brian: require("file!../assets/test.mp4")
};

This led me to believe there might be some issue with the file encoding. I converted the original video to mp4 using an online converter, and the converted file works. I'm still investigating to confirm that it is a file issue rather than a file size issue, as the converter halfed the file size.

[alex-cory]

Did this ever get resolved? I'm having the same issue. I posted a question about this to StackOverflow.

[kenwheeler]

I believe the issue was encoding specific.

[DSchau]

As info, I solved this issue by re-encoding the video for "web" with Handlebars (a Mac specific tool, but I' sure there are similar solutions for Windows).