在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"
        }
      ]
    };
  }

};

Answer 1

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

codepen：

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