vue-Dplayer中url路径访问和动态切换视频
vue-Dplayer中url和视频路径问题
目录结构
App.vue #### 主要内容为get()方法中的注释
<template>
<div id="app">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<br>
<!-- assets文件-->
<img src="@/assets/1.jpg" alt="">
<!--publci文件-->
<img src="../public/3.jpeg" alt="">
<!--static-->
<img src="../static/2.jpg" alt="">
<hr>
<br>
<button @click="get">切换</button>
<d-player ref="player" id="player" :options="options"></d-player>
</div>
</template>
<script>
export default {
data() {
return {
name1:'./video/',
name2:'../static/',
name3:'assets/',
namef1:'2.mp4',
namef2:'my.mp4',
namef3:'1.jpg',
dp:null,
options: {
container: document.getElementById("dplayer"), //播放器容器
mutex: false, // 防止同时播放多个用户，在该用户开始播放时暂停其他用户
theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
loop: false, // 是否自动循环
lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
hotkey: true, // 是否支持热键，调节音量，播放，暂停等
preload: "auto", // 自动预加载
volume: 0.7, // 初始化音量
playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2, 3], //可选的播放速度，可自定义
video: {
url:''
}},
}
},
mounted() {
this.dp = this.$refs.player.dp
},
methods:{
get(){
/* name1:'./video/',
name2:'../static/',
name3:'assets/',
namef1:'2.mp4',
namef2:'my.mp4',
namef3:'1.jpg',
*/
this.dp.switchVideo({
// url:require(this.name2+this.namef2) //不可以 static文件内
// url:require('../static/'+this.namef2) //可以 static文件内-----
// url:require("../static/my.mp4") //可以 static文件内-----
// url:require(this.name1+this.namef1) //不可以 public/video文件
// url:"../static//2.mp4", //找不到文件 404
// url:this.name1+this.namef1, //可以 public/video文件可
// url:"./video/2.mp4", //可以 public/video文件可-----
// pic:require('./assets/1.jpg') //可以 assets文件
// pic:require('@/assets/1.jpg') //可以 assets文件
// pic:require('@/'+this.name3+this.namef3) //报错 assets文件 Module not found: Error: Can't resolve '../views/HomeView.vue' in 'E:\学习\vue\untitled\src\router'
// pic:require('@/assets/'+this.namef3) //可以 assets文件
// pic: '@/assets/1.jpg' //找不到文件 404
/*
*img标签和 background-image: url() 可以成功获取
--- @/assets/xxx.jpg assets文件
--- ../public/xxx.jpeg public文件
--- ../static/xxx.jpg static文件
*vue-Dplayer中：
* url/pic:后面直接跟随路径可以, url直接有变量拼接可以
*url/pic:require() 里面不能使用多个变量拼接 可以直接写路径
- url:require("../static/my.mp4") //可以
- url:require('../static/'+this.namef2) //可以
- url:require(this.name2+this.namef2) //不可以
*/
})
},
},
}
</script>
<style lang="less">
.dplayer{
width: 500px;
height: 300px;
}
img{
width: 300px;
height: 300px;
}
.a1,.a2,.a3{
width: 300px;
height: 300px ;
}
.a1{
background-image: url('@/assets/1.jpg');
}
.a2{
background-image: url('../public/3.jpeg');
}
.a3{
background-image: url('../static/2.jpg');
}
</style>
问题
1.为啥require()中不能使用多个变量拼接，会报错或者没有效果
2.如果有一个需求，需要从后端获取视频的名字，如何实现动态切换视频。将视频存放在public中可以做到。如何不在public文件下使用require()怎么办呀。
3.为啥莫img标签和css中的背景图片属性 就可以直接获取static，public，asstes文件下的图片资源，而vue-Dpayer中的url和pic只能获取public下的图片视频资源，其他两个文件夹不能直接获取必须使用require() 但是require()不能使用多个变量拼接
源于chatGPT仅供参考
1. 为什么 require() 中不能使用多个变量拼接导致报错或没有效果？
在 Vue.js 和 webpack 的环境下，`require()` 是用于静态资源模块加载的方法。它的参数是一个字符串常量（或者是一个变量），表示资源的路径。这个路径必须在编译时可确定。
由于 webpack 在构建时对代码进行静态分析和静态优化，所以 `require()` 中的参数必须是静态的，无法在运行时通过拼接多个变量的方式来动态指定资源路径。因此，当尝试使用多个变量拼接时，webpack 在构建过程中无法解析资源路径，从而导致报错或没有效果。
2. 如何实现从后端获取视频名称并动态切换视频？
如果需要从后端获取视频名称，并根据名称动态切换视频，可以通过在 Vue 组件中使用异步请求（例如使用 Axios、fetch 等）来获取视频名称数据。一旦获取到视频名称，即可根据名称拼接出视频的 URL，并将其赋值给 Vue-Dplayer 中的 `url` 属性。
示例代码如下：
```vue
<template>
<div>
<button @click="changeVideo">切换视频</button>
<d-player ref="player" :options="options"></d-player>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
options: {
// 其他 Dplayer 配置
url: '' // 初始为空，根据后端返回的视频名称动态更新
},
videoNames: ['video1.mp4', 'video2.mp4'], // 后端返回的视频名称列表
currentIndex: 0, // 当前播放视频的索引
}
},
mounted() {
this.initializePlayer();
},
methods: {
async initializePlayer() {
await this.changeVideo(); // 初始化时切换到第一个视频
},
async changeVideo() {
if (this.currentIndex >= this.videoNames.length) {
return; // 视频列表播放完毕，不再切换
}
const videoName = this.videoNames[this.currentIndex];
const videoUrl = `/path/to/videos/${videoName}`; // 根据视频名称拼接视频 URL
// 请求后端获取视频名称的示例：
// const response = await axios.get('/api/getVideoName');
// const videoName = response.data.name;
// const videoUrl = `/path/to/videos/${videoName}`;
this.options.url = videoUrl;
this.$refs.player.dp.switchVideo({
url: videoUrl
});
this.currentIndex++; // 更新当前播放视频的索引
}
}
}
</script>
- 为什么 img 标签和 CSS 中的背景图片属性可以直接获取 static、public 和 assets 文件夹下的图片资源，而 Vue-Dplayer 中的 url 和 pic 只能获取 public 下的图片视频资源，其他两个文件夹不能直接获取，必须使用 require()？
这是因为在 webpack 的配置中，Vue CLI 对静态资源有不同的处理方式。
- 对于 img 标签和 CSS 中的背景图片属性，Vue CLI 会使用 webpack 的
url-loader或file-loader对静态资源进行处理，并将其转换为对应的路径。 - 而 Vue-Dplayer 是一个独立的插件库，它可能没有设置类似的资源加载器来处理图片和视频资源。因此，在 Vue-Dplayer 中，如果要引用其他文件夹下的图片和视频资源，需要使用
require()方法来告诉 webpack 编译器去解析资源路径。
总结：Vue CLI 在构建项目时对静态资源有默认的处理方式，而 Vue-Dplayer 并未提供相应的资源处理机制，所以需要手动使用 require() 来获取其他文件夹下的资源。
```