Nuxt项目中MKV视频无法播放的技术求助

Hey there! I totally get where you're coming from—frustrating when a video plays fine in Chrome but throws errors in your project. Let's break down why this is happening and how to fix it.

Why the Error Happens #

Webpack (which powers both Vue and Nuxt) doesn't know how to handle .mkv files out of the box. It's set up to process common file types like .mp4, .jpg, or .js, but when it encounters an unconfigured binary file like .mkv, it throws that "Module parse failed" error because it lacks the right loader to handle it.

Solution 1: For Nuxt Projects #

If you're using Nuxt 2, here's how to configure Webpack to handle .mkv files:

1. First, install the file-loader package (it helps Webpack copy and resolve binary files):

   npm install file-loader --save-dev
   # or
   yarn add file-loader -D
   

2. Open your nuxt.config.js and add a custom Webpack rule inside the build.extend section:

   export default {
     build: {
       extend(config, { isDev, isClient }) {
         // Add rule to process .mkv files
         config.module.rules.push({
           test: /\.mkv$/,
           use: [
             {
               loader: 'file-loader',
               options: {
                 name: '[path][name].[ext]' // Keeps the original file structure
               }
             }
           ]
         })
       }
     }
   }
   

Solution 2: For Vue CLI Projects (Webpack) #

If you're working with a standard Vue project created via Vue CLI:

1. Install file-loader first (same as above):

   npm install file-loader --save-dev
   # or
   yarn add file-loader -D
   

2. Modify your vue.config.js to add the Webpack rule:

   module.exports = {
     configureWebpack: {
       module: {
         rules: [
           {
             test: /\.mkv$/,
             use: [
               {
                 loader: 'file-loader',
                 options: {
                   name: 'assets/videos/[name].[hash:8].[ext]' // Outputs to a structured folder
                 }
               }
             ]
           }
         ]
       }
     }
   }
   

How to Use the .mkv Video in Your Component #

Once the loader is set up, you need to properly import the video file in your Vue component (don't just hardcode the path—Webpack needs to track it):

<template>
  <video controls autoplay>
    <source :src="myMkvVideo" type="video/x-matroska">
    Your browser doesn't support MKV video playback.
  </video>
</template>

<script>
// Import the video file relative to your component
import myMkvVideo from '@/assets/videos/your-video-file.mkv'

export default {
  data() {
    return {
      myMkvVideo
    }
  }
}
</script>

Important Note #

Make sure the <source> tag uses the correct MIME type: video/x-matroska—this tells the browser exactly what kind of video file it's dealing with, which helps with playback.

内容的提问来源于stack exchange，提问作者RodebertX