vue-Dplayer中url路径访问和动态切换视频

Question

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()不能使用多个变量拼接

Answer 1

源于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>

1. 为什么 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() 来获取其他文件夹下的资源。

```