在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

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

codepen：

Session->OpeningAddress

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