在 Nuxt carousel 组件中显示视频 [英] Displaying video in Nuxt carousel component
问题描述
我正在与 Nuxt 合作，并希望在旋转木马组件中显示视频，旁边是我在静态文件夹中的 jpeg 和 png 图像.您可以在屏幕截图中看到静态文件夹内容.轮播组件:
<部分><v卡类=mx-自动"颜色="#26c6da"黑暗的最大宽度=1200"><v-轮播><v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item></v-轮播></v-card></节><脚本>var 缓存 = {};//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 构造 = [];函数构造项(文件名，构造){fileNames.forEach(fileName => {构造推({'src': 文件名.substr(1)})});返回构造；}console.log('物品');控制台日志(imagesArray)；//在构建时缓存将填充所有必需的模块.var res =constructItems(imagesArray,constructed);控制台日志(res)；导出默认{数据:函数(){返回 {项目:资源};}}这适用于 jpg 图像，但我看到视频文件的空白屏幕.我在这里做错了什么.
按照以下说明，我已替换为以下内容.不幸的是，视频无法播放，我得到了一张空白幻灯片.所有 jpg 图像虽然工作.我做错了什么?
出口默认{数据() {返回 {项目: [ {编号:'1'，内容:'<iframe width="560" height="315" ' +'src="https://www.youtube.com/embed/zjcVPZCG4sM" ' +'frameborder="0" 允许="自动播放；加密媒体" ' +'允许全屏></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"}]};}};
看起来可能是 vuetify 的问题.当前的解决方案似乎是使用 iframe.只需更改 iframe 中的 src 并使宽度和高度自动.在 github 上查看问题:https://github.com/vuetifyjs/vuetify/issues/5063.
代码笔:
项目:[{编号:1"，内容:'<iframe width="560" height="315" src="https://www.youtube.com/embed/zjcVPZCG4sM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen><<;/iframe>'},{ ID:2"，内容:'<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
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 组件中显示视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
