html - 如何在 Vue-plyr 中播放本地视频?
问题描述
我可以vue-plyr
像这样使用 youtube 视频:
<template>
<section id="vision" class="vision">
<vue-plyr>
<div data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
</vue-plyr>
</section>
</template>
但是当我尝试使用文档中描述的本地视频时:
<template>
<section id="vision" class="vision">
<vue-plyr :options="options">
<video
controls
crossorigin
playsinline
>
<source
size="1080"
src="../../videos/cgi_neutral.mp4"
type="video/mp4"
/>
</video>
</vue-plyr>
</section>
</template>
我收到一个错误:
Uncaught Error: Module parse failed: Unexpected character ' ' (1:0)
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
(Source code omitted for this binary file)
at Object../resources/videos/cgi_neutral.mp4 (app.js:92053)
at __webpack_require__ (app.js:92132)
at Module../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/vue/sections/vision.vue?vue&type=template&id=0c8fcfd8&scoped=true (app.js:39037)
at __webpack_require__ (app.js:92132)
at Module../resources/vue/sections/vision.vue?vue&type=template&id=0c8fcfd8&scoped=true (app.js:87992)
at __webpack_require__ (app.js:92132)
at Module../resources/vue/sections/vision.vue (app.js:87291)
at __webpack_require__ (app.js:92132)
at Module../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/vue/index.vue?vue&type=script&setup=true&lang=js (app.js:36141)
at __webpack_require__ (app.js:92132)
./resources/videos/cgi_neutral.mp4 @ app.js:92053
__webpack_require__ @ app.js:92132
./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/vue/sections/vision.vue?vue&type=template&id=0c8fcfd8&scoped=true @ app.js:39037
__webpack_require__ @ app.js:92132
./resources/vue/sections/vision.vue?vue&type=template&id=0c8fcfd8&scoped=true @ app.js:87992
__webpack_require__ @ app.js:92132
./resources/vue/sections/vision.vue @ app.js:87291
__webpack_require__ @ app.js:92132
./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/vue/index.vue?vue&type=script&setup=true&lang=js @ app.js:36141
__webpack_require__ @ app.js:92132
./resources/vue/index.vue?vue&type=script&setup=true&lang=js @ app.js:87384
__webpack_require__ @ app.js:92132
./resources/vue/index.vue @ app.js:86765
__webpack_require__ @ app.js:92132
./resources/js/router.js @ app.js:39210
__webpack_require__ @ app.js:92132
./resources/js/app.js @ app.js:39103
__webpack_require__ @ app.js:92132
(anonymous) @ app.js:92297
__webpack_require__.O @ app.js:92169
(anonymous) @ app.js:92299
(anonymous) @ app.js:92301
这个 git 问题说要安装scss-loader
,但我已经有了它:
"sass-loader": "^12.2.0"
我究竟做错了什么?
解决方案
您可以将文件 mp4 放在公共文件夹中吗?它可以通过带有 url 之类的浏览器访问
localhost:8000/videos/cgi_neutral.mp4
,然后嵌入到组件中:
<source
size="1080"
src="/videos/cgi_neutral.mp4"
type="video/mp4"
/>
比使用 loader 和 webpack + file-loader 更好
推荐阅读
- java - 从另一个变量Key和静态Key重新计算Key?[解决了]
- mysql - Spark JDBC MySQL 语法错误,列名带有空格
- database - Wordpress 从 https 重定向到 http
- javascript - 我怎样才能只显示一个帖子的 100 个字符?
- reactjs - 对未调用 Blur 做出反应
- python - 两个相同的程序有不同的结果。Python
- python-3.x - Django Admin - 添加模型 B 的记录时包含模型 A 的字段
- excel - 预期:行号或标签或语句或语句结尾
- ios - 目标 C 方法不等待 Swift 方法的完成处理程序
- ios - 如何在没有 Mac 的情况下启用应用内购买