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

Posted 2023-02-23

【中文标题】如何添加加载程序来处理 .mpd 和 .mp4s 文件类型（破折号媒体文件）？

【英文标题】：How to add a loader to handle .mpd and .mp4s filetype (dash media files)?

【发布时间】：2021-04-09 02:23:08

【问题描述】：

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

dash资源有效；我在一个静态 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, 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">"

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>

【参考方案1】：

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

<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,
        loader: 'file-loader',
        options: 
          name: '[path][name].[ext]'
        
      )
    

【参考方案2】：

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

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

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

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

相比之下，静态/中的文件根本不被 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 替换为您要加载的扩展程序即可。

【讨论】：

谢谢！我摆弄了一下使其适用于视频资源。并且文件最终没有出现在所需的资产子目录中。只有 mpd 文件被复制到该目录，其他文件在根目录中。以下是受我最终使用的这个答案的启发而做出的更改。