vue.js - 在 Nuxt 轮播组件中显示视频

Question

我正在使用 Nuxt，并希望在我的静态文件夹中的 jpeg 和 png 图像旁边的轮播组件中显示视频。您可以在屏幕截图中看到静态文件夹内容。轮播组件：

<template>
<section>
<v-card
    class="mx-auto"
    color="#26c6da"
    dark
    max-width="1200"
>

<v-carousel>
    <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
</v-carousel>

</v-card>

</section>
</template>


<script>
var cache = {};
// const images = require.context('../static/', false, /\.png$|\.jpg/);
const images = require.context('../static/', false, /\.png$|\.jpg|\.mp4/);
var imagesArray = Array.from(images.keys());
// const images = ["./52lv.PNG", "./Capture1.PNG", "./maps.PNG"]
console.log(images.keys());
var constructed = [];
function constructItems(fileNames, constructed) {
    fileNames.forEach(fileName => {
    constructed.push({
        'src': fileName.substr(1)
    })
    });
    return constructed;
}
console.log('items ');
console.log(imagesArray);
// At build-time cache will be populated with all required modules. 
var res = constructItems(imagesArray, constructed);
console.log(res);
export default {
    data: function() {
    return {
        items: res
    };
    }
}

这适用于 jpg 图像，但我看到视频文件出现空白屏幕。我在这里做错了什么。

编辑：

按照以下说明，我已替换为以下内容。不幸的是，视频无法播放，我得到一张空白幻灯片。所有的 jpg 图像都可以工作。我究竟做错了什么？

export default {
  data() {
    return {
      items: [  {
id: '1',
content: '<iframe width="560" height="315" ' +
  'src="https://www.youtube.com/embed/zjcVPZCG4sM" ' +
  'frameborder="0" allow="autoplay; encrypted-media" ' +
  'allowfullscreen></iframe>'
 },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
        },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
        },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
        }
      ]
    };
  }

};

标签： vue.jsnuxt.js

Answer 1

看起来这可能是一个 vuetify 问题。当前的解决方案似乎是使用 iframe。只需更改 iframe 中的 src 并将宽度和高度设为自动。在 github 上查看问题：https ://github.com/vuetifyjs/vuetify/issues/5063 。

代码笔：

items: [{
  id: "1",
  content: '<iframe width="560" height="315" src="https://www.youtube.com/embed/zjcVPZCG4sM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'},
        { id: "2",
  content: '<iframe width="560" height="315" src="https://www.youtube.com/embed/zjcVPZCG4sM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'}
]

链接：https ://codepen.io/anon/pen/MqBEqb