如何添加加载器来处理 .mpd 和 .mp4s 文件类型（dash 媒体文件）？
How to add a loader to handle .mpd and .mp4s filetype (dash media files)?
我有一个问题：如何添加破折号资产（即 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 运行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>
您的答案在这里：https://vuejs-templates.github.io/webpack/static.html
To answer this question, we first need to understand how Webpack deals with static assets. In *.vue components, all your templates and CSS are parsed by vue-html-loader and css-loader to look for asset URLs. For example, in and background: url(./logo.png), "./logo.png" is a relative asset path and will be resolved by Webpack as a module dependency.
Because logo.png is not JavaScript, when treated as a module dependency, we need to use url-loader and file-loader to process it. This template has already configured these loaders for you, so you get features such as filename fingerprinting and conditional base64 inlining for free, while being able to use relative/module paths without worrying about deployment.
我假设您需要的是“真正的”静态资产（它的解释相同 link），因为没有必要将您的媒体文件与 JS 一起“打包”。
In comparison, files in static/ are not processed by Webpack at all: they are directly copied to their final destination as-is, with the same filename. You must reference these files using absolute paths, which is determined by joining build.assetsPublicPath and build.assetsSubDirectory in config.js.
或者，您可以更改您的 nuxt 配置以加载音频文件，如 documentation:
中所述
You need to extend its default configuration in 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,
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
})
}
我有一个问题：如何添加破折号资产（即 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 运行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>
您的答案在这里：https://vuejs-templates.github.io/webpack/static.html
To answer this question, we first need to understand how Webpack deals with static assets. In *.vue components, all your templates and CSS are parsed by vue-html-loader and css-loader to look for asset URLs. For example, in and background: url(./logo.png), "./logo.png" is a relative asset path and will be resolved by Webpack as a module dependency.
Because logo.png is not JavaScript, when treated as a module dependency, we need to use url-loader and file-loader to process it. This template has already configured these loaders for you, so you get features such as filename fingerprinting and conditional base64 inlining for free, while being able to use relative/module paths without worrying about deployment.
我假设您需要的是“真正的”静态资产（它的解释相同 link），因为没有必要将您的媒体文件与 JS 一起“打包”。
In comparison, files in static/ are not processed by Webpack at all: they are directly copied to their final destination as-is, with the same filename. You must reference these files using absolute paths, which is determined by joining build.assetsPublicPath and build.assetsSubDirectory in config.js.
或者，您可以更改您的 nuxt 配置以加载音频文件，如 documentation:
中所述You need to extend its default configuration in 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,
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
})
}