如何添加加载器来处理 .mpd 和 .mp4s 文件类型破折号媒体文件？

问题描述

我有一个问题：如何添加要包含的破折号资产（即 file_dash.mpd、file_1.m4s 和 file_init.mp4）？

破折号资源有效；我在静态 HTML 文件中测试了媒体集（file_dash.mpd、file_1.m4s 和 file_init.mp4）。

解决方法：从外部 https 资源加载文件，例如 src="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd" type="application/dash+xml" ) 工作正常.

解决方案？我认为可能需要扩展 webpack https://nuxtjs.org/faq/extend-webpack/，但我不知道该怎么做。

非常感谢任何帮助！

代码片段

<section data-sr id="dash" class="dash u-full-width">
    <div class="video-background">
      <div class="video-wrap">
        <video id="bgvid" autoplay loop loop="true" muted controls="false" setScheduleWhilePaused="true"
          setFastSwitchEnabled="true">
<!--        <source src="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd" type="application/dash+xml" /> -->
        <source src="~/assets/media/tangent_dash.mpd" type="application/dash+xml" />
        </video>
      </div>
    </div>
  </section>

npm run dev 抛出的错误信息

ERROR  in ./assets/media/tangent_dash.mpd                                                    friendly-errors 20:39:50

Module parse Failed: Unexpected token (1:0)                                                   friendly-errors 20:39:50
You may need an appropriate loader to handle this file type,currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <?xml version="1.0"?>
| <!-- MPD file Generated with GPAC version 1.0.1-rev0-gd8538e8a-master at 2020-12-30T18:06:34.544Z -->
| <MPD xmlns="urn:mpeg:dash:schema:mpd:2011" minBufferTime="PT1.500S" type="static" mediaPresentationDuration="PT0H0M7.166S" maxSegmentDuration="PT0H0M7.167S" profiles="urn:mpeg:dash:profile:isoff-live:2011,http://dashif.org/guidelines/dash264">
                                                                                              friendly-errors 20:39:50
 @ ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=template&id=2a183b29& 29:23-63
 @ ./pages/index.vue?vue&type=template&id=2a183b29&
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js
                                                                                              friendly-errors 20:39:50
ℹ Waiting for file changes                                                                                    20:39:50
ℹ Memory usage: 206 MB (RSS: 410 MB)                                                                          20:39:50
ℹ Listening on: http://localhost:3000/                                                                        20:39:50

 ERROR  [Vue warn]: Error in render: "Error: Module parse Failed: Unexpected token (1:0)                      20:41:25
You may need an appropriate loader to handle this file type,http://dashif.org/guidelines/dash264">"

found in

---> <Hello> at pages/index.vue
       <Nuxt>
         <Layouts/default.vue> at layouts/default.vue
           <Root>

index.vue 文件

<template>

<section data-sr id="dash" class="dash u-full-width">
    <div class="video-background">
      <div class="video-wrap">
        <video id="bgvid" autoplay loop loop="true" muted controls="false" setScheduleWhilePaused="true"
          setFastSwitchEnabled="true">
<!--        <source src="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd" type="application/dash+xml" /> -->
        <source src="~/assets/media/tangent_dash.mpd" type="application/dash+xml" />
        </video>
      </div>
    </div>
  </section>

</template>

<script>
import '../node_modules/video.js/dist/video-js.css'
import videojs from 'video.js'
import 'dashjs'
import 'videojs-contrib-dash'

export default {
  name: 'hello',data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

解决方法

您的答案在这里：https://vuejs-templates.github.io/webpack/static.html

要回答这个问题，我们首先需要了解 Webpack 是如何处理静态资产的。在 *.vue 组件中，所有模板和 CSS 都由 vue-html-loader 和 css-loader 解析以查找资产 URL。例如 in 和 background: url(./logo.png),"./logo.png" 是相对资源路径，会被 Webpack 解析为模块依赖。

因为 logo.png 不是 JavaScript，所以当作为模块依赖处理时，我们需要使用 url-loader 和 file-loader 来处理它。该模板已经为您配置了这些加载器，因此您可以免费获得文件名指纹识别和条件 base64 内联等功能，同时能够使用相对/模块路径而无需担心部署。

我假设您需要的是“真实”静态资产（在同一个链接中进行了解释），因为没有必要将您的媒体文件与 JS 一起“打包”。

相比之下，static/ 中的文件根本不会被 Webpack 处理：它们被直接复制到最终目的地，并具有相同的文件名。您必须使用绝对路径引用这些文件，这是通过在 config.js 中加入 build.assetsPublicPath 和 build.assetsSubDirectory 来确定的。

或者，您可以更改您的 nuxt 配置以加载音频文件，如 documentation 中所述：

您需要在 nuxt.config.js 中扩展其默认配置：

export default {
  build: {
    extend(config,ctx) {
      config.module.rules.push({
        test: /\.(ogg|mp3|wav|mpe?g|OTHER_AUDIO_FILE_EXTENSIONS_LIKE_MP4S)$/i,loader: 'file-loader',options: {
          name: '[path][name].[ext]'
        }
      })
    }
  }
}

只需将 OTHER_AUDIO_FILE_EXTENSIONS_LIKE_MP4S 替换为您要加载的扩展程序即可。

我最终将模板视频标签更改为：

<source src="tangent_dash.mpd" type="application/dash+xml" />

并将以下内容添加到 nuxt.config.js 文件中：

build: {
    loaders: {
      vue: {
        transformAssetUrls: {
          video: 'src'
        }
      }
    },extend(config,ctx) {
      config.module.rules.push({
        test: /\.(mpd|mp4|m4s)$/i,options: {
          name: '[path][name].[ext]'
        }
      })
    }

nuxt.js video.js vue-component vue.js webpack webpack webpack