在 Nuxt carousel 组件中显示视频

I'm working with Nuxt and would like to display a video in a carousel component along side jpeg and png images I have in the static folder . You can see the static folder contents in the screenshot. The carousel component:<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 }; }}This works fine for the jpg images but I see a blank screen for the video file. What Am I doing wrong here.EDIT:following the directions below, I've substituted in the following. Unfortunately the video will not play and I'm getting a blank slide. All the jpg images work though. What am I doing wrong?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" } ] }; }}; 解决方案 It looks like it might be a vuetify problem. The current solution seems to be to use iframes. Just change the src in the iframe and make the width and height auto. checkout the issue on 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>'}]link: https://codepen.io/anon/pen/MqBEqb 这篇关于在 Nuxt carousel 组件中显示视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！