如何添加加载程序来处理.mpd和.mp4s文件类型(短划线媒体文件)

Question

我有一个问题：如何添加要包含的dash资产(即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, 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>

Answer 1

您的答案如下：https://vuejs-templates.github.io/webpack/static.html

要回答这个问题，我们首先需要了解Webpack如何处理静态资产。在*.vue组件中，所有模板和CSS都由vue-html加载程序和CSS加载程序解析，以查找资产URL。例如，in和background:url(./logo.png(，"徽标.png"；是一个相对资产路径，将由Webpack解析为模块依赖项。

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

我认为你需要的是；真实的"；静态资产(在同一链接中进行了解释(；包装"；您的媒体文件以及JS。

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

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

您需要在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替换为要加载的扩展即可。

Answer 2

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

<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]'
}
})
}