首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在Vue-plyr中播放本地视频?

如何在Vue-plyr中播放本地视频?
EN

Stack Overflow用户
提问于 2021-11-12 10:52:39
回答 1查看 89关注 0票数 0

我可以让vue-plyr处理一段youtube视频,如下所示:

代码语言:javascript
运行
复制
<template>
  <section id="vision" class="vision">
    <vue-plyr>
      <div data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
    </vue-plyr>
  </section>
</template>

但是当我尝试使用doc中描述的本地视频时

代码语言:javascript
运行
复制
<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>

我得到一个错误:

代码语言:javascript
运行
复制
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

This git issue说要安装scss-loader,但我已经有了:

代码语言:javascript
运行
复制
"sass-loader": "^12.2.0"

我做错了什么?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-12 11:35:13

你能把文件mp4放在公用文件夹里吗?它可以通过浏览器通过url访问,如localhost:8000/videos/cgi_neutral.mp4,然后嵌入到组件中:

代码语言:javascript
运行
复制
 <source
     size="1080"
     src="/videos/cgi_neutral.mp4"
     type="video/mp4"
 />

这比使用加载器和webpack +文件加载器要好

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69941749

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档